Top React Native Interview Questions (2023)

Hi Guys, In this post we are going to discuss Top React Native Interview Questions for Experienced Developers. Interviewing with big tech companies is an exciting opportunity, especially for those interested in mobile app development using frameworks like React Native. These companies, known for their innovation and cutting-edge technologies, often include specific questions related to Javascript & React Native in their interview processes. In this article, we delve into the world of big tech interviews, focusing on React Native, and explore a curated selection of challenging and insightful interview questions asked by these industry giants. By understanding and preparing for these questions, you can gain valuable insights into the expectations of big tech companies regarding React Native expertise and increase your chances of success in landing your dream job. Check this post for React Native Interview Questions for Developers.

1. Can you tell me what will be the output code that I pasted in the chat box?

console.log(name);
console.log(age);
console.log(address);
var name = "Jim";
const age = 30;
let address = "Mumbai";

Answer: For this question, they accept the following explanation from you.

There are a couple of things to note. Firstly, when you try to log the name variable before it is defined, it will result in an undefined being printed to the console. This is because the variable is declared using the var keyword, which gets hoisted to the top of its scope but does not have an initial value assigned at that point.

Secondly, when trying to log the age variable, it will throw a ReferenceError because const variables must be initialized when declared, and they cannot be reassigned or redeclared.

Lastly, when trying to log the address variable, it will also throw a ReferenceError because let the variables are block-scoped and cannot be accessed before they are declared.

2. What is the difference between var, let & const?

1. var: Variables declared with var is function-scoped or global scope depending on where they are declared. They are hoisted on the top of their scope. meaning they can be accessed before they are declared. var can be redeclared & reassigned with their scope.
2. let: Variables declared with let are block-scoped. means their access is limited in which they are declared. let variables can not be hoisted and not able to access before they are declared. They can be reassigned within scope but not redeclared within the same scope.
3. const: Const variables are also block-scope and not hoisted. const variables are read-only. means they cannot be reassigned once initialize.

3. Pasted another code what will be the output?

const array = [{name: "First"}, {name: "Second"}]
array[0].name = 0;
console.log(array);

Note: Now,  you will get confused because as per the previous question, const variables are only read-only but in the above code it will update the value of the array. read-only means you cannot assign a new array to a const variable array. so the output will be as follows:

[{name: 0}, {name: "Second"}]

4. What is variable Hoisting?

Variable hoisting is a power javascript technique where variable declarations are moved to the top in their respective scope in the compilation time. variables declared with var only support variable hoisting. this means you can directly write a = 5; in the javascript and use a in any function if you declared globally.

a = 5;
console.log(a);
var a;

This will print 5 in the console. because

The variable a is assigned a value 5 before it is declared. Despite this unconventional order, the code will still work due to hoisting.

During the hoisting process, the var a; declaration is moved to the top of its scope, which in this case is the global scope. This means that var a; is effectively processed before the assignment a = 5;

As a result, when console.log(a) is executed, it will output 5 to the console, indicating that the value assigned to a is accessible and correctly retrieved.

It’s important to note that while hoisting allows the code to run without errors, it is generally considered best practice to declare variables before using them to improve code readability and maintainability.

5. What are promises?

Promises in Javascript are the way to handle asynchronous operations such as fetching data from the server, reading files, and executing time-consuming tasks. without blocking the execution of the program.

A promise represents the eventual completion or failure of an asynchronous operation and allows you to attach callbacks to handle the result when it becomes available.

1. Pending: The initial state of a promise. It is neither fulfilled nor rejected.
2. Fulfilled: The state of a promise when it successfully completes the asynchronous operation, providing the result value.
3. Rejected: The state of a promise when it encounters an error or fails to complete the asynchronous operation, providing the reason for the failure.

example,

const delay = (duration) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Operation completed after ${duration} milliseconds`);
    }, duration);
  });
};

delay(2000)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

6. What is Callback?

A callback is a function that is passed as an argument to another function and is executed at a later point in time. In JavaScript, callbacks are commonly used to handle asynchronous operations or to perform actions after a certain task or event has occurred.

Callbacks allow you to define custom behavior that will be executed when a specific condition is met or when an asynchronous operation completes. They provide a way to control the flow of the program and handle the result of an operation once it is available.

function fetchData(callback) {
  // Simulating an asynchronous operation
  setTimeout(() => {
    const data = { id: 1, name: "John Doe" };
    callback(data);
  }, 2000);
}

function processResult(data) {
  console.log("Processing data:", data);
}

fetchData(processResult);

7. What is an Event loop?

The event loop is the mechanism that continually listens to events & executes them and moves to the next one if the task queue is empty. It ensures that tasks are processed in a non-blocking manner, allowing for efficient handling of events and responsiveness in JavaScript applications. Let’s explore an example to understand how the event loop works:

console.log("Start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Here’s a step-by-step breakdown of how the event loop handles this code:

1. The code execution starts, and “Start” is logged into the console.
2. The setTimeout function is encountered. It schedules the provided callback function to be executed after a minimum delay of zero milliseconds. The callback function logs “setTimeout” to the console.
3. The Promise.resolve().then() construct is encountered. It schedules a microtask to be executed as soon as the call stack is empty. The microtask contains the callback function that logs “Promise” to the console.
4. “End” is logged to the console.
5. At this point, the call stack is empty. The event loop checks the task queue for any pending tasks.
6. The event loop picks up the microtask from the task queue and pushes its callback function onto the call stack.
7. The callback function logs “Promise” to the console.
8. The microtask execution is completed, and the call stack becomes empty again.
9. The event loop checks the task queue once more and finds the setTimeout task.
10. The callback function associated with setTimeout is pushed onto the call stack.
11. The callback function logs “setTimeout” to the console.
12. The setTimeout the task is completed.

Output:

Start
End
Promise
setTimeout

Note: Promise microtask, created by Promise.resolve().then(), has higher priority than the setTimeout task. This means that microtasks, such as Promises, are processed before tasks like setTimeout in the event loop.

8. What is MicroTask?

It represents the queue of the task which executes asynchronously with higher priority than regular tasks. When a microtask is created, it is added to the microtask queue. The event loop processes this queue after completing the current task and before moving on to the regular task queue. This means that microtasks have a higher priority and are executed before regular tasks.

Here’s an example to illustrate the concept of microtasks:

console.log('Start');

Promise.resolve().then(() => {
  console.log('Microtask 1');
}).then(() => {
  console.log('Microtask 2');
});

console.log('End');

Start
End
Microtask 1
Microtask 2

function exampleFunction() {
  var x = 10;
  
  if (x > 5) {
    let y = 20;
    const z = 30;
    console.log(x, y, z); // Output: 10 20 30
  }
  
  console.log(x); // Output: 10
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

function outerFunction() {
  var outerVariable = 'Hello';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // Output: Hello

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('Start');
  
  await delay(2000);
  console.log('After 2 seconds');
  
  await delay(1000);
  console.log('After another 1 second');

  return 'Done';
}

example().then(result => {
  console.log(result);
});

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Input value:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}