React Native Interview Questions - My Own Experience

 1.What is the difference between var, let, and const in React Native?

var (Old way, avoid using it)

• Function-scoped (not block-scoped).

• Can be redeclared and reassigned.

• Not recommended in modern JavaScript due to scoping issues.

Example:

javascript

var message = "Hello, React Native!";
console.log(message); // Output: Hello, React Native!

var message = "Changed!";
console.log(message); // Output: Changed! (Re-declaration allowed)

let (Block-scoped, recommended for variables that change)
Cannot be redeclared within the same scope.
Can be reassigned.
Supports block scoping.
Example:
javascript
let count = 10;
count = 20; // Allowed
console.log(count); // Output: 20

let name = "Alice";
// let name = "Bob"; // ❌ Error: Cannot redeclare 'name'
const (Block-scoped, immutable reference)
Cannot be reassigned.
Cannot be redeclared.
Best for constants and values that shouldn't change.
Example:
javascript
const appName = "MyReactApp";
// appName = "NewApp"; // ❌ Error: Assignment to constant variable

console.log(appName); // Output: MyReactApp
Key Takeaways:
✅ Use let for variables that may change.  
✅ Use const for values that remain constant.  
❌ Avoid var due to its weak scoping rules.
2.What is the difference between hoisting and closure in React Native?
🔹 Hoisting (Variable & Function Elevation)
Hoisting is JavaScript’s mechanism of moving variable and function declarations to the top of their scope during compilation. However, only the declaration is hoisted, not the initialization.
Example:
javascript
console.log(name); // ❌ Undefined (not an error, but value isn't assigned yet)
var name = "React Native";
Here, JavaScript hoists var name; to the top, but the value "React Native" is assigned later.
Only var is hoisted with undefined—let and const are not initialized until execution reaches them.
Function Hoisting:
javascript
sayHello(); // ✅ Works, because function declarations are fully hoisted.

function sayHello() {
  console.log("Hello from React Native!");
}
Function declarations are fully hoisted, meaning you can call them before they are defined.
But function expressions (e.g., const sayHello = () => {}) are not hoisted.
🔹 Closure (Accessing Parent Scope)
A closure is when a function "remembers" variables from its parent scope, even after the parent function has finished executing.
Example:
javascript
function outerFunction() {
  let count = 0; // Private variable

  return function innerFunction() {
    count++; // Accessing 'count' from the outer scope
    console.log("Current count:", count);
  };
}

const counter = outerFunction();
counter(); // Output: Current count: 1
counter(); // Output: Current count: 2
innerFunction keeps access to count even after outerFunction has returned.
This is useful for encapsulating logic or creating private variables.

3.What is Mutable Data Types in React Native?
Mutable data types allow their values to be changed after they are initialized. Some common examples include:
1️⃣ Objects ({})
Objects in JavaScript are mutable, meaning you can modify their properties after they are created.
Example:
javascript
let user = { name: "Logan", age: 25 };
user.age = 26; // ✅ Allowed (modifying object property)
console.log(user); // Output: { name: "Logan", age: 26 }
2️⃣ Arrays ([])
Arrays are mutable, allowing elements to be added, removed, or modified.
Example:
javascript
let numbers = [1, 2, 3];
numbers.push(4); // ✅ Adds element
console.log(numbers); // Output: [1, 2, 3, 4]
3️⃣ Functions
Functions are also objects in JavaScript and can be reassigned or modified.
Example:
javascript
function greet() {
  console.log("Hello!");
}
greet = () => console.log("Hi!"); // ✅ Function reassigned
greet(); // Output: Hi!
4.What is IMMutable Data Types in React Native?
Immutable data types cannot be modified after they are created. Some examples include:
1️⃣ Primitive Data Types (String, Number, Boolean, Null, Undefined, Symbol, BigInt)
Once assigned, they cannot be altered.
Example (Strings):
javascript
let text = "React Native";
text[0] = "r"; // ❌ No effect, strings are immutable
console.log(text); // Output: React Native
2️⃣ const Variables
Using const ensures a variable cannot be reassigned.
Example:
javascript
const appName = "MyApp";
// appName = "NewApp"; ❌ Error: Assignment to constant variable
5.What is common mutable data types in react native?
Objects – Used to store collections of key-value pairs
javascript
let obj = { name: "Kaviyapriya", field: "Chemistry" };
obj.name = "Logan"; // Modified!
console.log(obj); // { name: "Logan", field: "Chemistry" }
Arrays – Ordered lists where elements can be added, removed, or updated
javascript
let arr = [1, 2, 3];
arr.push(4); // Adds 4 to the array
console.log(arr); // [1, 2, 3, 4]
Functions – Can have properties or be reassigned (though not typically modified)
javascript
function greet() {
    console.log("Hello!");
}
greet.language = "English"; // Functions can hold properties too!
console.log(greet.language); // "English"
Sets & Maps – Collections that allow modification
javascript
let set = new Set([1, 2, 3]);
set.add(4);
console.log(set); // Set {1, 2, 3, 4}

let map = new Map();
map.set("key", "value");
console.log(map.get("key")); // "value"
6.What is Function/Block Scope in React Native?
Function Scope
Variables declared with var inside a function are only accessible within that function.
Outside the function, they are not available.
Example:
javascript
function exampleFunction() {
    var a = 10;
    console.log(a); // Works inside the function
}
exampleFunction();
console.log(a); // Error: a is not defined
Block Scope
Variables declared with let or const are only accessible within the block {} where they are defined.
Example:
javascript
function exampleBlock() {
    if (true) {
        let b = 20;
        const c = 30;
        console.log(b, c); // Works inside block
    }
    console.log(b, c); // Error: b and c are not defined
}

7.What is Synchronous & ASynchronous in React Native? 
Synchronous
Code runs line by line, waiting for each operation to complete before moving to the next.
Blocking execution—if a task takes time, it halts everything else.

Example:
javascript
console.log("Start");
console.log("Middle");
console.log("End")
Output:
Start
Middle
End
Asynchronous
Tasks run independently, allowing the program to continue executing without waiting.
Non-blocking—useful for operations like fetching data or reading files.
Example using setTimeout:
javascript
console.log("Start");

setTimeout(() => {
    console.log("Middle (delayed)");
}, 2000); // Runs after 2 seconds

console.log("End");
Output (after 2 seconds):
Start
End
Middle (delayed)

8.React Native is Synchronous or ASynchronous ? How ?
React Native is asynchronous in nature because it uses a bridge to communicate between 
JavaScript and native components. However, it also supports synchronous execution in 
specific cases.
How React Native Handles Execution
Asynchronous Behavior
React Native runs JavaScript on a separate thread, which means UI updates, API calls, and event handling do not block the main thread.
Example: Fetching data from an API using fetch()
javascript
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));
The network request happens asynchronously while other UI operations continue.
Synchronous Behavior
Some operations, like modifying local variables or using certain native methods, 
can be synchronous.
Example: Updating a state synchronously within a function
javascript
function updateCount() {
    let count = 0;
    count++; // Synchronous update
    console.log(count);
}
React Native’s Bridge System
React Native communicates asynchronously between JavaScript and the native 
platform using a bridge.
However, Turbo Modules and Fabric architecture aim to optimize this by 
reducing unnecessary asynchronous behavior.
9.What is Functions vs Arrow Functions in React Native?