Updated for 2025! Curated top React.js interview questions with high quality answers for acing your Front End Engineer interviews, brought to you by GreatFrontEnd.

Black Friday 2025 sale going on now, enjoy the largest discount of the year! Get 30% off GreatFrontEnd Premium -

1. What is React? Describe the benefits of React

   React is a JavaScript library created by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable components that manage their own state. Key benefits of React include a component-based architecture for modular code, the virtual DOM for efficient updates, a declarative UI for more readable code, one-way data binding for predictable data flow, and a strong community and ecosystem with abundant resources and tools.

   Key characteristics of React:

   • Declarative: You describe the desired state of your UI based on data, and React handles updating the actual DOM efficiently.
   • Component-based: Build reusable and modular UI elements (components) that manage their own state and logic.
   • Virtual DOM: React uses a lightweight in-memory representation of the actual DOM, allowing it to perform updates selectively and efficiently.
   • JSX: While not mandatory, JSX provides a syntax extension that allows you to write HTML-like structures within your JavaScript code, making UI development more intuitive.
   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

2. What is the difference between React Node, React Element, and a React Component?

   A React Node is any renderable unit in React, such as an element, string, number, or null. A React Element is an immutable object describing what to render, created using JSX or React.createElement. A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

3. What is JSX and how does it work?

   JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example,

   Hello, world!
   in JSX is transformed into React.createElement('div', null, 'Hello, world!').
   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

4. What is the difference between state and props in React?

   In React, state is a local data storage that is managed within a component and can change over time, while props are read-only attributes passed from a parent component to a child component. State is used for data that changes within a component, whereas props are used to pass data and event handlers to child components.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

5. What is the purpose of the key prop in React?

   The key prop in React is used to uniquely identify elements in a list. It helps React optimize rendering by efficiently updating and reordering elements. Without a unique key, React may re-render elements unnecessarily, leading to performance issues and bugs.

   {
   items.map((item) => <ListItem key={item.id} value={item.value} />);
   }
   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

6. What is the consequence of using array indices as the value for keys in React?

   Using array indices as the value for keys in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for keys to ensure React can efficiently manage and update the DOM.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

7. What is the difference between controlled and uncontrolled React Components?

   Controlled components in React are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers. Uncontrolled components, on the other hand, store their own state internally and rely on refs to access the form values. Controlled components offer more control and are easier to test, while uncontrolled components can be simpler to implement for basic use cases.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

8. What are some pitfalls about using context in React?

   Using context in React can lead to performance issues if not managed properly. It can cause unnecessary re-renders of components that consume the context, even if the part of the context they use hasn't changed. Additionally, overusing context for state management can make the code harder to understand and maintain. It's important to use context sparingly and consider other state management solutions like Redux or Zustand for more complex state needs.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

9. What are the benefits of using hooks in React?

   Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like useState and useEffect are commonly used to manage state and side effects in functional components.

   
   

   Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

   Back to top |
   
   

10. What are the rules of React hooks?

    React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.

    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

11. What is the difference between useEffect and useLayoutEffect in React?

    useEffect and useLayoutEffect are React hooks used to handle side effects in functional components, but they differ in timing and use cases:

    • useEffect: Runs asynchronously after the DOM has been painted. It is suitable for tasks like data fetching, subscriptions, or logging.
    • useLayoutEffect: Runs synchronously after DOM mutations but before the browser paints. Use it for tasks like measuring DOM elements or synchronizing the UI with the DOM.

    Code example:

    { console.log('useEffect: Runs after DOM paint'); }); useLayoutEffect(() => { console.log('useLayoutEffect: Runs before DOM paint'); console.log('Element width:', ref.current.offsetWidth); }); return

    Hello

    ; }">import React, { useEffect, useLayoutEffect, useRef } from 'react';
    
    function Example() {
    const ref = useRef();
    
    useEffect(() => {
    console.log('useEffect: Runs after DOM paint');
    });
    
    useLayoutEffect(() => {
    console.log('useLayoutEffect: Runs before DOM paint');
    console.log('Element width:', ref.current.offsetWidth);
    });
    
    return <div ref={ref}>Hellodiv>;
    }
    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

12. What is the purpose of callback function argument format of setState() in React and when should it be used?

    The callback function argument format of setState() in React is used to ensure that state updates are based on the most recent state and props. This is particularly important when the new state depends on the previous state. Instead of passing an object directly to setState(), you pass a function that takes the previous state and props as arguments and returns the new state.

    this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment,
    }));
    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

13. What does the dependency array of useEffect affect?

    The dependency array of useEffect determines when the effect should re-run. If the array is empty, the effect runs only once after the initial render. If it contains variables, the effect runs whenever any of those variables change. If omitted, the effect runs after every render.

    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

14. What is the useRef hook in React and when should it be used?

    The useRef hook in React is used to create a mutable object that persists across renders. It can be used to access and manipulate DOM elements directly, store mutable values that do not cause re-renders when updated, and keep a reference to a value without triggering a re-render. For example, you can use useRef to focus an input element:

    { inputEl.current.focus(); }, []); return ; }">import React, { useRef, useEffect } from 'react';
    
    function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    
    useEffect(() => {
    inputEl.current.focus();
    }, []);
    
    return <input ref={inputEl} type="text" />;
    }
    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

15. What is the useCallback hook in React and when should it be used?

    The useCallback hook in React is used to memoize functions, preventing them from being recreated on every render. This is particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders. You should use useCallback when you have a function that is passed as a prop to a child component and you want to avoid the child component re-rendering unnecessarily.

    const memoizedCallback = useCallback(() => {
    doSomething(a, b);
    }, [a, b]);
    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

16. What is the useMemo hook in React and when should it be used?

    The useMemo hook in React is used to memoize expensive calculations so that they are only recomputed when one of the dependencies has changed. This can improve performance by avoiding unnecessary recalculations. You should use useMemo when you have a computationally expensive function that doesn't need to run on every render.

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

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

17. What is the useReducer hook in React and when should it be used?

    The useReducer hook in React is used for managing complex state logic in functional components. It is an alternative to useState and is particularly useful when the state has multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.

    const [state, dispatch] = useReducer(reducer, initialState);

    Use useReducer when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.

    
    

    Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.

    Back to top |
    
    

18. What is the useId hook in React and when should it be used?

    The useId hook in React is used to generate unique IDs for elements within a component. This is particularly useful for accessibility purposes, such as linking form inputs with their labels. It ensures that IDs are unique across the entire application, even if the component is rendered multiple times.

    Name:
    ); }">import { useId } from 'react';
    
    function MyComponent() {
    const id = useId();
    return (
    <div>
    <label htmlFor={id}>Name:label>
    <input id={id} type="text" />
    div>
    );
    }