React Native Interview Questions & Answers

Beginner Level Questions

Explore the fundamentals of React Native with our collection of essential beginner-level questions.

Advance Level Questions

Deepen your React Native knowledge with our advanced questions that cover state management and cross-platform compatibility.

Expert Level Questions

Master React Native with our expert-level questions that delve into performance optimization and the inner workings of the React Native bridge.

Question 1:- How does React Native differ from React?

Answer: Platform:
* React: Primarily used for building web applications. It runs in a web browser and uses HTML and CSS for rendering UI components.
* React Native: Used for building mobile applications for iOS and Android. It compiles to native code, which allows it to leverage native UI components and performance.

Rendering:
* React: Uses the virtual DOM to render HTML elements in the web browser.
* React Native: Uses native components (like View, Text, Image, etc.) to render UI elements directly on mobile devices.

Navigation:
* React: Typically uses libraries like React Router for navigation within a web application.
* React Native: Uses libraries like React Navigation or React Native Navigation to handle navigation and routing in mobile apps.

Performance:
* React: Performance is typically handled by the browser and virtual DOM.
React Native: Offers better performance for mobile apps because it renders using native components and can leverage native code when necessary.

Question 2:- What are the key features of React Native?

Answer: 1. Single Codebase
2. Component Reusability
3. Native Performance.
4. Hot Reloading and Fast Refresh
5. Access to Native Features
6. Platform-Specific Code
7. Responsive Design
8. Large Community Support
9. Bridge for Native Code

Question 3:- How do functional components differ from class components?

Answer: 
Functional Components:-
* Syntax: Defined as functions that return JSX.
* State and Lifecycle: Use Hooks (e.g., useState, useEffect) for state and lifecycle features.
* Simplicity: Generally more concise and easier to read.
* No this: Do not use the this keyword, avoiding binding issues.
* Performance: Often more performant due to simpler structure and optimization by React.

Class Components:-
* Syntax: Defined as ES6 classes that extend React.Component.
* State and Lifecycle: Manage state and lifecycle with this.state and lifecycle methods (e.g., componentDidMount).
* Complexity: Can be more verbose and complex due to this keyword and binding methods.
* this Keyword: Use this for accessing state and methods, which requires careful binding.

Question 4:- What are higher-order components (HOC) in React Native and how are they utilized?

Answer: An HOC is a function that takes a component and returns a new component with enhanced behavior or additional props.Reusing component logic

Utilization of HOCs
1. Code Reusability
2. Enhancing Components
3. Conditional Rendering
4. Prop Injection
5. Separation of Concerns

Question 5:- What is the function of the React Native bridge?

Answer: The React Native bridge is a critical part of the architecture that allows communication between JavaScript code and native code in a React Native application.
Functions of the React Native Bridge

1. The bridge allows JavaScript code to invoke native functions and access native APIs. 
2. The bridge also allows native code to send events or data back to JavaScript, enabling JavaScript to respond to changes or updates from the native side.
3. The bridge operates asynchronously, meaning that calls between JavaScript and native code do not block the main thread.
4. The bridge handles the serialization of data from JavaScript into a format that can be understood by native code and vice versa.	
5. The bridge enables the integration of custom native modules and third-party libraries that are not part of the core React Native framework.

Uses:-
import { NativeModules } from 'react-native'; 
const { MyNativeModule } = NativeModules;

Question 6:- What role does Flexbox play in React Native?

Answer: Flexbox plays a crucial role in React Native for designing and managing layouts.

Key Roles of Flexbox in React Native:-
1. Flexible Layouts
2. Alignment and Justification
3. Layout Direction
4. Flex Properties
5. Centering and Spacing

Flexbox Properties in React Native:-
flexDirection:- row, column (default is column).
justifyContent:- flex-start, center, space-between, space-around, space-evenly.
alignItems:- flex-start, center, flex-end, stretch.
alignSelf:- auto, flex-start, center, flex-end, stretch.
flex:- 1, 2
flexWrap:- nowrap, wrap, wrap-reverse.
alignContent:- flex-start, center, flex-end, space-between, space-around, stretch.

Question 7:- How is state used in React Native?

Answer: State is used to manage and control the data and UI of components. It allows components to maintain their own internal data and re-render when that data changes. We can store the data by using state.

Component State
State in React Native components is typically defined using the useState hook (for functional components) or the this.state object (for class components).

State ManagementLocal State:- Inside a componentGlobal State:- ContextAPI or ReduxLocal and Async State
Handling State Updates

Question 8:- What are props in React Native and how are they used?

Answer: In React Native, Props are a mechanism to pass data from one component to another, typically from a parent to a child. They are read-only, meaning that a child component cannot modify the props it receives.

Key Points about Props:-
1. Read-Only
2. Dynamic Data
3. Event Handling
4. Reusable Components

Question 9:- Syntax of UseEffect with handling life cycle in react native

Answer: The useEffect hook in React Native (and React) is used to handle side effects in functional components. It can be thought of as the equivalent of lifecycle methods in class components (componentDidMount, componentDidUpdate, and componentWillUnmount).

useEffect(() => {
// Code to run on mount and on updates 

return () => { // Code to run on unmount };

}, [/* dependencies */]);

Question 10:- Difference between useLayoutEffect and useEffect

Answer: The useLayoutEffect and useEffect hooks iallow you to perform side effects in functional components, but they differ in when they are executed within the rendering lifecycle.

useEffect:- 
useEffect runs after the render has been committed to the screen. It does not block the painting of the screen.
useEffect runs asynchronously

useLayoutEffect:-
useLayoutEffect runs synchronously immediately after the DOM has been updated but before the browser has painted. It runs before the paint and blocks the painting until the effect has finished.
useLayoutEffect runs synchronously and blocks the paint, it can cause performance issues if overused or used inappropriately.

Syntax:- 

useEffect(() => { 
console.log('useEffect - Count changed:');
}, []);

useLayoutEffect(() => { 
console.log('useLayoutEffect - Count changed:'); 
}, [count]);

Question 11:- How can you make an API call in React Native?

Answer: The most common method for making HTTP requests is by using the built-in fetch API. You can also use third-party libraries like Axios for a more feature-rich experience.

Using fetch:-
The fetch API is a native JavaScript function for making network requests. It returns a promise that resolves to the response object representing the result of the request.

Example:-
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => {
  setData(json);
  setLoading(false);
})
.catch(error => {
  console.error(error);
  setLoading(false);
});

Using Axios:- 
Axios is a popular library for making HTTP requests. It provides a more powerful and flexible interface for handling HTTP requests and responses.

Example:-
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
  setData(response.data);
  setLoading(false);
})
.catch(error => {
  console.error(error);
  setLoading(false);
});

Question 12:- How to pass data from parent component to child component?

Answer: Passing data from a parent component to a child component in React Native is done using props (short for properties). Props are a mechanism for passing data and event handlers from a parent component to a child component.

To pass data from a parent component to a child component in React Native:
1. Define the child component and specify the props it will receive.
2. In the parent component, pass the data to the child component via props.

Access the props in the child component and use them as needed.

Question 13:- How to pass data from child component to parent component?

Answer: Passing data from a child component to a parent component in React or React Native involves using callback functions (event handlers) that are passed from the parent component to the child component. The child component then calls these functions, passing the data back to the parent.

To pass data from a child component to a parent component in React Native:
1. Define a callback function in the parent component that will handle the data.
2. Pass this function as a prop to the child component.

Call the callback function from the child component, passing the necessary data as an argument.

Question 14:- What is useMemo and how to use in react native?

Answer: useMemo is a React Hook that optimize performance by memoizing expensive calculations. This can help improve performance by preventing unnecessary re-calculations on every render.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo is a powerful hook for optimizing performance in React Native applications by memoizing expensive calculations. It helps ensure that these calculations are only performed when necessary, thereby improving the efficiency and responsiveness of your application.

Question 15:- What is useCallBack and how to use?

Answer: To memoize callback functions to avoid unnecessary re-creations on every render. When you need to pass a stable reference of a function to child components or other hooks that depend on the callback, which helps in preventing unnecessary renders or calculations.

const memoizedCallback = useCallback(() => { 
// Your callback function logic 
}, [dependencies]);

useCallback is a powerful hook for optimizing performance in React and React Native applications by memoizing callback functions. It helps ensure that these functions are not recreated on every render, thereby improving the efficiency and responsiveness of your application.

Question 16:- Can you explain the differences between the Shadow DOM, Real DOM, and Virtual DOM?

Answer: Real DOM (Document Object Model):- 
       The Real DOM is the actual representation of the page in the browser. It is a tree-like structure where each node represents part of the page

Virtual DOM:-
 The Virtual DOM is a lightweight, in-memory representation of the Real DOM. It allows React (and other libraries) to optimize updates to the Real DOM.

Shadow DOM:- 
 The Shadow DOM is a web standard that allows encapsulation of a component's internal structure and styles. It is part of the Web Components specification.

Question 17:- What is Async Storage in React Native and how is it used?

Answer: Async Storage is an asynchronous, persistent storage system for React Native applications. It is used to store data locally on the device using a simple key-value storage mechanism.

Ideal for storing small amounts of data, such as user settings or tokens, but not recommended for storing large datasets or complex data structures.

Async Storage was previously part of React Native core but is now provided by the @react-native-async-storage/async-storage package.

npm install @react-native-async-storage/async-storage
yarn add @react-native-async-storage/async-storage

AsyncStorage.setItem('storage_key', “value”);
AsyncStorage.getItem('storage_key');
AsyncStorage.removeItem('storage_key');
AsyncStorage.clear();

Question 18:- How does React Native manage different screen sizes?

Answer: React Native uses Flexbox for layout, which allows components to adjust their size and position dynamically based on the container's size. This helps create responsive designs that adapt to different screen sizes.
  Flexbox properties like flex, alignItems, justifyContent, and flexDirection

Question 19:- What is props drilling?

Answer: The process of passing data from a parent component to a deeply nested child component through intermediate components. Or passing data from one component to another component 
  
  Issues with Props Drilling
  * Prop Management
  * Maintainability
  * Performance
  
  Solutions to Avoid Props Drilling
  1. State Management Libraries (Redux/MobX)
  2. Component Composition
  3. Context API

Question 20:- List of some useful Hooks and their uses

Answer: React and React Native provide a set of built-in hooks that enable you to use state and other React features in functional components. React hooks provide a powerful and flexible way to manage state, side effects, and other features in functional components.
  
useState:-
To add state to functional components.
  Syntax:-
  const [count, setCount] = useState(0);
  
useEffect:-
  To perform side effects in functional components. It can replace lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
   Syntax:-
  useEffect(() => {
  // Perform side effect
  console.log('Component mounted or updated');
  
  // Cleanup
  return () => {
  console.log('Component will unmount');
  };
  }, []);
  
useContext:-
  To access the context value without having to use a context consumer.
   Syntax:-
  const MyContext = React.createContext();
  const value = useContext(MyContext);
  
useReducer:-
  To manage complex state logic using a reducer function, similar to Redux but built into React.
  Syntax:-
  const [state, dispatch] = useReducer(reducer, initialState);
  
useRef:-
  To persist values across renders without causing a re-render, and to access DOM elements directly.
  Syntax:-
  const inputRef = useRef(null);
  inputRef.current.focus();
  
useMemo:-
  To memoize expensive calculations and avoid re-computing them on every render.
  Syntax:-
  const computedValue = useMemo(() => {
  return expensiveCalculation(number);
  }, [number]);
  
  
useCallback:-
  To memoize callback functions to prevent unnecessary re-creations of functions.
  Syntax:-
  const handleClick = useCallback(() => {
  console.log('Button clicked');
  }, []);
  
  
useLayoutEffect:-
  Similar to useEffect, but fires synchronously after all DOM mutations. Used for reading layout and synchronously re-rendering.
  Syntax:-
  useLayoutEffect(() => { 
  console.log(divRef.current.getBoundingClientRect()); 
  }, []);

Contact Us

+91-8533079368

UpWork

Terms & Condition

This website uses cookies to enhance the user experience. We use first-party cookies to track user sessions and preferences.