是从https://www.geeksforgeeks.org/reactjs/react-interview-questions/获取的。

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. It is widely used by companies like Facebook, Instagram, Netflix, and Airbnb because of its flexibility and performance.

Key aspects of React are:

• Reusable Components: Speeds up development by allowing code reusability.
• Declarative UI: Makes it easier to describe how the UI should look based on the current state.
• Cross-Platform Support: Powers both web apps (React.js) and mobile apps (React Native).

Basic Level

Basic React Interview Questions

1. How does React.js work?

React.js works on a component-based architecture and uses a virtual DOM to efficiently update and render user interfaces.

• Components: UI is broken into reusable, independent pieces.
• JSX: Allows writing HTML-like code inside JavaScript for easier UI development..
• Virtual DOM: A lightweight copy of the real DOM that tracks changes.
• Reconciliation: Compares old and new Virtual DOM and updates only the changed parts in the real DOM.
• One-way Data Flow: Ensures predictable UI updates by passing data from parent to child via props.
• State Management: React automatically re-renders components when their state changes.

2. What is JSX and how is it converted into JavaScript?

• JSX: Syntax extension for JavaScript, mainly used with React.
• HTML in JS: Allows writing HTML-like code inside JavaScript for easier readability and maintenance.
• Expressions: Embed JavaScript expressions in JSX using {}.

Example of JSX: The name written in curly braces { } signifies JSX

1
const name = "Learner";
2
const element = (
3
    <h1>
4
        Hello,
5
        {name}.Welcome to GeeksforGeeks.
6
    </h1>
7
);

Browsers can’t understand JSX directly. Instead, tools like Babel transpile it into plain JavaScript using React.createElement().

xxxxxxxxxx
1
1
const element = <h1>Hello, Geeks!</h1>;

Babel converts it into:

xxxxxxxxxx
1
1
const element = React.createElement("h1", null, "Hello, World!");

3. What is a React component?

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier.

In React, we mainly have two types of components:

• Functional Components: Functional components are simply JavaScript functions. Initially, they were limited in terms of features like state and lifecycle methods. However, with the introduction of Hooks, functional components can now use state, manage side effects, and access other features that were once exclusive to class components.
• Class Components: Class components are more complex than functional components. They are able to manage state, handle lifecycle methods, and can also interact with other components. Class components can pass data between each other via props, similar to functional components.

4. Difference between functional and class component in React?

5. What are props and default props in React?

React allows us to pass information to a Component using something called props (which stands for properties). Props are objects which can be used inside a component. We can access any props inside from the component’s class to which the props is passed. The props can be accessed as shown below:

xxxxxxxxxx
1
1
this.props.propName;

Default props are fallback values assigned to a component’s props when the parent does not provide them. They help prevent undefined errors and make components more robust. Default props can be defined using:

• Class components:ComponentName.defaultProps = { propName: defaultValue }
• Functional components: assigning default values in function parameters.

6. What is state in React and how do you update it?

State is the internal, mutable data of a React component that controls its behavior and rendering. When state changes, React re-renders the component to update the UI.

State is updated using setState() in class components or the useState setter function in functional components. Updates are asynchronous and can be triggered by events, user interactions, or API responses. When new state depends on the previous state, the functional form (setState(prev => ...)) should be used.

7. Difference Between Props and State in React?

8. What are fragments in React?

In React, fragments allow you to group multiple elements without adding extra nodes to the DOM. Normally, returning multiple elements requires a wrapper like a <div>, which can create unnecessary DOM elements. Fragments solve this by letting you return multiple elements without extra wrappers.

• Fragments avoid extra DOM nodes.
• Short syntax: <> </> (cannot use attributes).
• Full syntax: <React.Fragment> </React.Fragment> (can use key).
• Useful in lists, tables, and grouping multiple elements.
• Helps keep the DOM clean and lightweight.

9. What is the difference between controlled and uncontrolled components?

10. How does the DOM manage the input value in uncontrolled components?

React does not manage the form input’s state. Instead, the DOM itself keeps track of the input’s value. You can access the value when needed using refs

• Input values are stored in the DOM, not React state.
• Use React.createRef() or useRef() to access the current value.
• Useful when you don’t need to react to every change or for simple forms.

React Hooks Interview Questions

11. What are Hooks in React and why were they introduced?

Hooks are special functions in React that let you use state, lifecycle methods, and other React features in functional components, which were previously only available in class components.

Why introduced:

• Before hooks, state and lifecycle methods could only be used in class components, leading to more boilerplate code and complex patterns.
• Hooks allow simpler, cleaner code using functional components.
• They promote reusability and composition of logic between components.

​x
1
import React, { useState } from 'react';
2
​
3
function Counter() {
4
  const [count, setCount] = useState(0);
5
  return (
6
    <div>
7
      <p>{count}</p>
8
      <button onClick={() => setCount(count + 1)}>Increment</button>
9
    </div>
10
  );
11
}

12. How does the useState hook work?

The useState hook allows you to add state to functional components. It returns a state variable and a setter function to update that state. When the state changes, React re-renders the component with the updated value.

Example:

xxxxxxxxxx
12
1
import { useState } from 'react';
2
​
3
function Counter() {
4
  const [count, setCount] = useState(0);
5
​
6
  return (
7
    <div>
8
      <p>Count: {count}</p>
9
      <button onClick={() => setCount(count + 1)}>Increment</button>
10
    </div>
11
  );
12
}

In this example:

• count is the current state value.
• setCount is the function used to update state.
• 0 is the initial value when the component mounts. When setCount is called, React re-renders Counter with the new count value.

13. What is useEffect in React and what is the role of its dependency array?

useEffect is a React hook that allows functional components to perform side effects such as fetching data, setting up subscriptions, or directly manipulating the DOM. It runs after the component renders, ensuring the UI is updated first.

The dependency array controls when the effect runs:

• [] : runs once after the component mounts (like componentDidMount).
• [dep1, dep2] : runs only when a dependency changes.
• Omitted (no array) : runs after every render.

useEffect can also return a cleanup function that runs on unmount or before the next effect, helping prevent memory leaks.

Example :

xxxxxxxxxx
4
1
useEffect(() => {
2
  console.log('Effect runs');
3
  return () => console.log('Cleanup runs');
4
}, [dependency]);

14. What is the difference between useEffect and useLayoutEffect?

15. What is the useContext hook and when should you use it?

The useContext hook allows functional components to consume values from a React Context without passing props through every level of the component tree (avoiding “prop drilling”).

When to use it:

• Sharing global data like theme, user info, or authentication status.
• Avoiding prop drilling through many component levels.
• When multiple components need access to the same state or data.

16. What is the useReducer hook and when is it preferred over useState?

The useReducer is a React hook used to manage complex state logic in functional components. It works similarly to Redux: you define a reducer function that takes the current state and an action, and returns a new state.

Example:

xxxxxxxxxx
4
1
const [state, dispatch] = useReducer(reducer, initialState);
2
​
3
// Example usage:
4
dispatch({ type: 'increment' });

In this example:

• state is the current state.
• dispatch is used to send actions to update the state.

Preferred over useState when:

• State logic is complex or has multiple sub-values.
• Next state depends on previous state.
• You want centralized state management in a component.

17. What is the useRef hook and what are its common use cases?

The useRef hook creates a mutable object that persists across renders without causing re-renders. It is commonly used to access DOM elements or store mutable values.

Example:

xxxxxxxxxx
16
1
import { useRef } from 'react';
2
​
3
function App() {
4
  const inputRef = useRef();
5
​
6
  const focusInput = () => {
7
    inputRef.current.focus();
8
  };
9
​
10
  return (
11
    <div>
12
      <input ref={inputRef} type="text" />
13
      <button onClick={focusInput}>Focus</button>
14
    </div>
15
  );
16
}

In this example:

• inputRef stores a reference to the input DOM node.
• Calling inputRef.current.focus() focuses the input without re-rendering the component.

Common use cases:

• Accessing DOM nodes directly (focus, scroll, measure).
• Storing mutable values that don’t trigger re-renders.
• Keeping previous state values for comparison.

18. Explain the difference between useMemo and useCallback?

19. What are custom hooks in React and how do you create one?

Custom hooks are reusable functions that let you extract and share logic between functional components. They are JavaScript functions whose names start with use and can call other hooks like useState or useEffect.

Example:

xxxxxxxxxx
25
1
import { useState, useEffect } from 'react';
2
​
3
function useFetch(url) {
4
  const [data, setData] = useState(null);
5
  const [loading, setLoading] = useState(true);
6
​
7
  useEffect(() => {
8
    fetch(url)
9
      .then(res => res.json())
10
      .then(data => {
11
        setData(data);
12
        setLoading(false);
13
      });
14
  }, [url]);
15
​
16
  return { data, loading };
17
}
18
​
19
// Usage in a component
20
function App() {
21
  const { data, loading } = useFetch('https://api.example.com/data');
22
​
23
  if (loading) return <p>Loading...</p>;
24
  return <div>{JSON.stringify(data)}</div>;
25
}

In this example, useFetch is a custom hook that fetches data from an API and manages loading state. The hook is reused in App to keep the component clean and separate the data-fetching logic.

20. What are the rules of hooks and why are they important?

Hooks in React must follow certain rules to work correctly. These rules ensure that React can track state and effects reliably and prevent unexpected bugs.

• Always call hooks at the top level of your component or custom hook.
• Only call hooks from React functional components or custom hooks.
• Custom hooks should always start with use, like useFetch or useForm.

Why they are important:

• Preserve state and effect order between renders.
• Ensure components behave predictably.
• Prevent bugs and unexpected behavior when using hooks like useState and useEffect.

React State Management Interview Questions

21. What is State Management in React and what is the difference between Local and Global State?

State management refers to how an application handles and shares data across components. It ensures that the UI is updated correctly whenever the underlying data (state) changes. In React, state can be managed locally (inside components) or globally (shared across multiple components using context, Redux, Zustand, etc.).

22. What are some popular state management solutions in React/Next.js?

There are several approaches and libraries for managing state in React and Next.js, depending on the scale and complexity of your application:

• React built-in hooks:useState, useReducer, useContext – for local or small-scale state management.
• Context API: Ideal for small to medium global state needs.
• Redux / Redux Toolkit: Widely used for large-scale applications with complex state logic.
• Zustand: Lightweight state management library for simplicity and performance.
• Recoil / Jotai / MobX: Alternative libraries offering fine-grained state control.
• Server-side state (Next.js):useSWR, React Query, or Server Actions for fetching and caching server data efficiently.

23. When should you use Redux over Context API?

Choosing between Redux and Context API depends on the size and complexity of your application:

Use Redux when:

• The application is large and complex.
• You need predictable state management with debugging tools (e.g., Redux DevTools).
• There are frequent state updates and many shared states across components.

Use Context API when:

• The application is small or medium-sized.
• You only need to share simple state, such as theme, language, or user info.

24. What is the difference between Client State and Server State?

25. Explain the Context API in React.

The Context API in React is used to share data globally across components without prop drilling. It allows you to wrap components with a provider and access the shared value anywhere in the tree using useContext.createContext() : Creates a context.

• Avoids prop drilling.
• Uses Provider to supply data.
• Components consume data with useContext or Consumer.
• Best for global values like theme, auth, language.
• Often combined with useState/useReducer for updates.

26. What is the role of useReducer in state management?

The useReducer hook in React plays an important role in state management when the logic for updating state is complex or involves multiple actions. Unlike useState, which is best for simple state updates, useReducer organizes state transitions using a reducer function, making the code more predictable and easier to maintain. It is especially useful in larger applications or when managing related pieces of state.

• Manages complex state logic more effectively than useState.
• Uses a reducer function that takes state and action, then returns a new state.
• Returns [state, dispatch], where dispatch triggers actions.
• Helps keep state updates predictable and organized.
• Often used in forms, lists, or apps needing Redux-like patterns.

27. How do you handle persistent state in React apps?

Persistent state ensures that certain data remains available even after page reloads or across sessions. Common approaches include:

• localStorage or sessionStorage: Save state that persists across page reloads.
• Combine state hooks with effects: Use useState or useReducer together with useEffect to sync state with storage.
• IndexedDB: For larger or more complex client-side storage needs.
• Backend storage: Store state on a server/database via APIs for server-side persistence.
• State management libraries: Use Redux, Zustand, or Context API with persistence middleware.
• Cookies: Suitable for small pieces of data, like authentication tokens.

28. What is the difference between derived state and computed state in React?

In React, sometimes you need values that depend on other state or props. These values can be handled as derived state or computed state, but they work differently:

• Derived state: State calculated from props or other state. Should be avoided if it can be computed during render.
• Computed state: Calculated on the fly during render or using hooks like useMemo. Ensures data stays consistent without storing redundant state.

29. How can you optimize state updates for performance in React?

Optimizing state updates ensures that components re-render only when necessary, improving performance in React applications:

• Keep state localized to the smallest possible component.
• Use useMemo and useCallback to avoid unnecessary re-renders.
• Batch state updates where possible.
• Avoid deep nested objects in state; normalize the data.
• Use state management libraries efficiently (e.g., Redux selectors, Zustand slices).

30. How do you handle asynchronous state updates in React?

In React, state updates are asynchronous, so you need to handle them carefully to ensure predictable results:

• State updates (via setState or the setter from useState) do not happen immediately.
• Use the functional form of setState when the new state depends on the previous state:

xxxxxxxxxx
1
1
setCount(prevCount => prevCount + 1);

• For multiple sequential updates, consider useReducer for predictable state transitions.
• Use effects (useEffect) to react to changes in state asynchronously.

React Rendering & Performance Questions:

31. Can you explain what the Virtual DOM is and how React uses it?

The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM in the browser. Instead of updating the actual DOM directly, which can be slow and costly, React first updates the Virtual DOM when a component’s state or props change. React then compares the new Virtual DOM with the previous one using a process called diffing, identifies the minimum set of changes needed, and updates only those parts of the real DOM. This approach makes UI updates faster and more efficient by reducing unnecessary DOM manipulations. Key points:

• Virtual DOM is a JavaScript object representing the real DOM.
• React updates the VDOM first, not the real DOM.
• Uses a diffing algorithm to detect changes efficiently.
• Only the necessary parts of the real DOM are updated.
• Improves performance and user experience in dynamic applications.

32. What do you understand by reconciliation in React? Why is it important?

Reconciliation in React is the process of comparing the new Virtual DOM with the previous one to determine what has changed. React then updates only the necessary parts of the real DOM, instead of re-rendering the entire UI. This approach improves performance, rendering speed, and efficiency, ensuring a smooth and responsive user experience. Key points:

• Reconciliation is React’s process to update the DOM efficiently.
• Compares new Virtual DOM with previous Virtual DOM using diffing.
• Updates only the changed parts of the real DOM.
• Improves performance, rendering speed, and efficiency.
• Ensures a smooth and responsive UI.

33. How does React.memo help improve performance?

React.memo is a higher-order component that prevents unnecessary re-renders of functional components. It re-renders a component only if its props have changed, which helps improve performance in components that render frequently or are part of large lists.

Example: If you have a large list of items and only one item changes, React.memo ensures that the other list items do not re-render, saving processing time and improving UI performance.

34. If I ask you to optimize a slow React application, what techniques would you use?

To improve performance in a slow React application, you can use several optimization techniques:

• Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders.
• Split code using React.lazy and Suspense for on-demand component loading.
• Optimize large lists with react-window or react-virtualized.
• Avoid anonymous functions in render; use useCallback instead.
• Keep state localized as much as possible instead of placing everything in global state.
• Use proper key props when rendering lists.
• For server data, use libraries like React Query or SWR with caching to reduce unnecessary refetching.

35. What do you mean by code splitting and lazy loading in React?

Code splitting and lazy loading are techniques used to improve performance by reducing the initial load time of a React application.

• Code Splitting: Breaks the app’s bundle into smaller chunks so the browser loads only what’s necessary.
• Lazy Loading: Loads components only when they are needed, instead of loading everything upfront.

In React, this is often implemented with React.lazy and <Suspense>:

xxxxxxxxxx
9
1
const MyComponent = React.lazy(() => import('./MyComponent'));
2
​
3
function App() {
4
  return (
5
    <Suspense fallback={<div>Loading...</div>}>
6
      <MyComponent />
7
    </Suspense>
8
  );
9
}

36. How would you optimize a slow React application?

Optimizing a React application ensures faster rendering and better performance, especially for large or complex apps:

• Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders.
• Split code with React.lazy and Suspense for on-demand loading.
• Optimize large lists using react-window or react-virtualized.
• Avoid anonymous functions in render; use useCallback instead.
• Keep state localized instead of storing everything globally.
• Use proper key props in lists to prevent unnecessary re-renders.
• For server data, use React Query or SWR with caching to reduce refetching.

37. What is the difference between React.PureComponent and React.Component?

Both Component and PureComponent are used to create class components, but they handle re-rendering differently:

• React.Component: Always re-renders when setState is called, regardless of whether the state or props have changed.
• React.PureComponent: Implements a shallow comparison of props and state; it only re-renders if something has actually changed.

38. How does React handle re-rendering when state or props change?

Components automatically re-render when their state or props change, but React optimizes this process using the virtual DOM:

• When state or props change, React creates a new Virtual DOM for the component.
• It compares the new Virtual DOM with the previous one (diffing algorithm) to detect changes.
• Only the necessary parts of the real DOM are updated.
• This approach improves performance by avoiding full DOM updates and ensures the UI stays in sync with the data.

39. What is the difference between controlled and uncontrolled components in terms of rendering?

Form inputs can be controlled or uncontrolled, and this affects how they are rendered and updated:

• Controlled components: React manages the input’s value through state. The UI is always in sync with React state, and updates happen on every change via onChange.
• Uncontrolled components: The DOM manages the input’s value, and React only accesses it when needed using refs. Useful for simple forms where you don’t need to track every change.

40. How do useMemo and useCallback help improve performance in React?

In React, re-renders can be expensive if functions or computed values are recreated unnecessarily. useMemo and useCallback help optimize rendering by caching values and functions:

• useMemo: Memoizes the result of a computation so that it is recalculated only when its dependencies change.
• useCallback: Memoizes a function so that it is not recreated on every render, preventing unnecessary re-renders in child components.
• Both hooks help avoid expensive recalculations and unnecessary re-renders, improving performance in large or complex components.

React Arrays & Lists Questions:

41. How do you render a list of items in React?

In React, lists are usually rendered using JavaScript’s .map() method. Each list item should also have a unique key prop so React can efficiently track and update elements.

xxxxxxxxxx
8
1
const fruits = ["Apple", "Banana", "Mango"];
2
return (
3
  <ul>
4
    {fruits.map((fruit, index) => (
5
      <li key={index}>{fruit}</li>
6
    ))}
7
  </ul>
8
);

In this Example, .map() is used to iterate over the array, and the key prop helps React identify each list item uniquely.

42. Why is the key prop important in React lists?

The key prop is important because it helps React efficiently manage list rendering. It allows React to identify which items have changed, been added, or removed, instead of re-rendering the entire list.

• Helps React track elements and update only what’s necessary.
• Prevents unnecessary re-renders, improving performance.
• Best practice: Use a unique ID as the key instead of the array index whenever possible.

43. What happens if we use the array index as a key in React?

Using the array index as a key technically works, but it is not recommended in most cases. If the list changes (items are reordered, added, or removed), React may reuse components incorrectly, leading to UI bugs.

• Can cause issues when list items are reordered.
• May lead to incorrect updates if items are added or removed.
• Safe only for static lists that never change.

44. How do you conditionally render list items in React?

In React, list items can be conditionally rendered using techniques like if statements, ternary operators, or array methods such as .filter() combined with .map().

Example:

xxxxxxxxxx
8
1
const users = [{name: "Aman", active: true}, {name: "Raj", active: false}];
2
return (
3
  <ul>
4
    {users
5
      .filter(user => user.active)
6
      .map(user => <li key={user.name}>{user.name}</li>)}
7
  </ul>
8
);

45. How do you update or remove an item from a list in React state?

State is immutable, so you cannot modify arrays directly. Instead, you create a new array using methods like .map() or .filter() and then update state with that new array.

Example (removing an item):

xxxxxxxxxx
5
1
const [list, setList] = useState(["A", "B", "C"]);
2
​
3
const removeItem = (item) => {
4
  setList(list.filter(i => i !== item));
5
};

In this example, .filter() creates a new array without the removed item, and setList updates the state.

46. What are some performance tips when rendering large lists in React?

Rendering very large lists can hurt performance, so React provides techniques and best practices to optimize them:

• Use unique keys so React can efficiently track items.
• Use virtualization libraries like react-window or react-virtualized to render only the visible portion of the list.
• Memoize list items with React.memo to prevent unnecessary re-renders.
• Implement pagination or lazy loading instead of rendering thousands of items at once.

47. How would you render a nested list in React?

You can nest .map() calls: one for the parent array and another for the child array.

Example:

xxxxxxxxxx
19
1
const categories = [
2
  { name: "Fruits", items: ["Apple", "Banana"] },
3
  { name: "Veggies", items: ["Carrot", "Tomato"] }
4
];
5
​
6
return (
7
  <div>
8
    {categories.map(cat => (
9
      <div key={cat.name}>
10
        <h3>{cat.name}</h3>
11
        <ul>
12
          {cat.items.map(item => (
13
            <li key={item}>{item}</li>
14
          ))}
15
        </ul>
16
      </div>
17
    ))}
18
  </div>
19
);

In this example, each level of data gets its own .map() loop, and both parent and child elements should have unique key props.

48. How do you handle dynamic addition of items in a list?

In React, since state is immutable, you cannot directly modify the existing array. Instead, you create a new array that includes the new item and update state.

Example:

xxxxxxxxxx
5
1
const [list, setList] = useState(["A", "B"]);
2
​
3
const addItem = (item) => {
4
  setList([...list, item]);
5
};

In this example:

• [...list, item] creates a new array with the existing items plus the new one.
• Calling setList with this new array updates the state and triggers a re-render, showing the updated list in the UI.

49. How do you handle dynamic sorting or filtering of lists in React?

In React, lists are usually stored in state, and you can sort or filter them dynamically by creating a new array based on the original list and updating the state.

Example:

xxxxxxxxxx
11
1
const [users, setUsers] = useState([
2
  { name: "Aman", age: 25 },
3
  { name: "Raj", age: 30 },
4
  { name: "Sara", age: 22 }
5
]);
6
​
7
// Filter active users
8
const filteredUsers = users.filter(user => user.age > 24);
9
​
10
// Sort by name
11
const sortedUsers = [...users].sort((a, b) => a.name.localeCompare(b.name));

In this example:

• filter creates a new array containing only the items that meet the condition.
• sort rearranges the array items; using [...users] ensures the original state is not mutated.
• Updating state with the new array triggers a re-render, displaying the sorted or filtered list in the UI.

50. What is the difference between rendering lists with map() vs forEach()?

When rendering lists, it’s important to return JSX elements for each item. The choice between map() and forEach() affects this:

• map(): Returns a new array, which can contain JSX elements to be rendered. This is the preferred method for rendering lists in React.
• forEach(): Does not return a new array, so it cannot directly produce elements for rendering. It’s only useful for side effects.

Example using map():

xxxxxxxxxx
6
1
const fruits = ["Apple", "Banana", "Mango"];
2
return (
3
  <ul>
4
    {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
5
  </ul>
6
);

In this example:

• map returns an array of <li> elements, which React renders.
• Using forEach here would not work, because it does not return the array of elements.

React Forms & Events Questions:

51. How are forms handled in React compared to plain HTML?

In plain HTML, the browser’s DOM manages form data. In React, form inputs are usually controlled components:

• The form values live in state.
• Each keystroke triggers an onChange handler to update state.
• This makes the data predictable and easy to validate before submission.

xxxxxxxxxx
19
1
function MyForm() {
2
  const [name, setName] = React.useState("");
3
​
4
  const handleSubmit = (e) => {
5
    e.preventDefault();
6
    alert("Submitted: " + name);
7
  };
8
​
9
  return (
10
    <form onSubmit={handleSubmit}>
11
      <input 
12
        type="text" 
13
        value={name} 
14
        onChange={(e) => setName(e.target.value)} 
15
      />
16
      <button type="submit">Submit</button>
17
    </form>
18
  );
19
}

In this example, the input is fully controlled by React through value and onChange.

52. How do you prevent the default form submission behavior in React?

By using event.preventDefault() inside the form’s onSubmit handler.

Example:

xxxxxxxxxx
4
1
const handleSubmit = (e) => {
2
  e.preventDefault();
3
  console.log("Form submitted!");
4
};

In this example, the page is stopped from reloading and lets React control what happens on submit.

53. What is event bubbling and how can you stop it in React?

• Event Bubbling: When an event triggered on a child element propagates upward to its parent elements.
• In React, you can stop it using event.stopPropagation().

xxxxxxxxxx
4
1
const handleClick = (e) => {
2
  e.stopPropagation();
3
  console.log("Child clicked, but won’t bubble up.");
4
};

54. How do you handle multiple input fields in a single form in React?

By using a single state object and updating it dynamically with name and value.

Example:

xxxxxxxxxx
5
1
const [formData, setFormData] = useState({ name: "", email: "" });
2
​
3
const handleChange = (e) => {
4
  setFormData({ ...formData, [e.target.name]: e.target.value });
5
};

This way, one handler can manage multiple inputs.

55. How do you reset form fields after submission in React?

In React, form inputs are usually controlled components, meaning their values are stored in state. To reset a form, you simply reset the state that controls the inputs:

Example:

xxxxxxxxxx
8
1
const [formData, setFormData] = useState({ name: "", email: "" });
2
​
3
const handleSubmit = (e) => {
4
  e.preventDefault();
5
  console.log(formData);
6
  // Reset form fields
7
  setFormData({ name: "", email: "" });
8
};

In this example:

• setFormData({ name: "", email: "" }) resets all input fields to their initial values.
• This triggers a re-render, updating the UI with empty inputs.

React Routing Questions:

56. What is React Router and why is it used?

React Router is a library that enables client-side routing in React applications. It allows you to create single-page applications (SPAs) where navigation between views happens without a full page reload, making apps faster and smoother.

57. Difference between <a> tag and <Link> in React Router?

• <a> tag: Reloads the whole page when navigating.
• <Link> component: Updates the URL and changes the component without reloading (SPA behavior).

58. What are the main components of React Router?

• <BrowserRouter> – Wraps the app and enables routing.
• <Routes> – Container for all route definitions.
• <Route> – Defines a path and the component to render.
• <Link> / <NavLink> – For navigation.
• useNavigate() – For programmatic navigation.

59. What is the difference between useHistory and useNavigate?

• In React Router v5 : navigation was done using useHistory().
• In React Router v6 : replaced with useNavigate().

xxxxxxxxxx
2
1
const navigate = useNavigate(); 
2
navigate("/dashboard"); 

60. How do you implement nested routes in React Router?

xxxxxxxxxx
6
1
<Routes>
2
  <Route path="/dashboard" element={<Dashboard />}>
3
    <Route path="profile" element={<Profile />} />
4
    <Route path="settings" element={<Settings />} />
5
  </Route>
6
</Routes>

/dashboard/profile : shows Profile inside Dashboard.

61. What are route parameters and how do you access them?

Route params are dynamic parts of the URL.

xxxxxxxxxx
1
1
<Route path="/users/:id" element={<User />} />

Inside User component:

xxxxxxxxxx
2
1
import { useParams } from "react-router-dom";
2
const { id } = useParams();

/users/101 : id = 101

62. How do you redirect a user in React Router?

• Using <Navigate> component:

xxxxxxxxxx
1
1
<Route path="/old" element={<Navigate to="/new" />} />

Using useNavigate() hook for programmatic redirects.

63. What is the difference between client-side routing and server-side routing?

Client-Side Routing

• In client-side routing, only the first request loads the HTML + JS bundle.
• After that, navigation happens inside the browser using JavaScript (like React Router).
• The page doesn’t reload : only the required component/view updates.

Example Flow:

• User visits /about.
• Server sends index.html + JS bundle (React app).
• React Router detects /about and loads <About /> component without reloading the page.

Server-Side Routing

In server-side routing, whenever a user clicks a link or enters a URL:

• A request goes to the server.
• The server processes it and sends back a new HTML page.
• The browser reloads the page completely.

Example Flow:

• User visits /about.
• Browser sends a request to server : /about.
• Server responds with an about.html page.
• Browser reloads and shows About page.

64. Difference between <Switch> and <Routes> in React Router

Switch:

• Used in React Router v5 to render only the first matching route.
• Checks routes from top to bottom and renders the first match.
• If multiple routes match, only the first one is rendered.
• The order of routes is very important.
• Supported component, render, and children props.
• Needed the exact keyword to avoid unwanted matches.
• Nested routes were harder to manage.

Example:

xxxxxxxxxx
5
1
<Switch>
2
  <Route exact path="/" component={Home} />
3
  <Route path="/about" component={About} />
4
  <Route path="/contact" render={() => <Contact />} />
5
</Switch>

Routes:

• Introduced in React Router v6 as a replacement for <Switch>.
• Uses a ranking algorithm to automatically find the best match.
• The order of routes does not matter.
• Supports only the element prop for rendering.
• Cleaner and simpler syntax compared to <Switch>.
• No need for the exact keyword anymore.
• Makes nested routing much easier.
• <Switch> is deprecated, and <Routes> is now the recommended way.

Example:

xxxxxxxxxx
5
1
<Routes>
2
  <Route path="/" element={<Home />} />
3
  <Route path="/about" element={<About />} />
4
  <Route path="/contact" element={<Contact />} />
5
</Routes>

This React Interview Questions and Answers covers a wide range of topics, from basic concepts to advanced techniques. Whether you're a beginner or an experienced developer, mastering these questions will enhance your readiness for React interviews and boost your confidence.

Advanced Level

React Advanced Interview Questions - 2025

This set contains the advanced-level questions asked in the interview.

1. What are custom hooks in React?

Custom hooks are normal JavaScript functions whose names start with “use”, and they may call other hooks. We use custom hooks to maintain the DRY concept, which is Don't Repeat Yourself. It helps us to write a logic once and use it anywhere in the code. Some of the commonly used custom hooks are:

• useFetch: Used for making API requests and handling loading and error states.
• useLocalStorage: Stores and retrieves values from localStorage to persist data between sessions.
• useDebounce: Used to delay a function execution until after a specified wait time (useful for search input).
• usePrevious: Stores the previous value of a state or prop before the component re-renders.
• useToggle: A simple hook to toggle a boolean state.

2. How to optimize a React code?

We can improve our React code by following these practices:

• Using binding functions in constructors
• Eliminating the use of inline attributes as they slow the process of loading
• Avoiding extra tags by using React fragments
• Lazy loading

3. What is the difference between useref and createRef in React ?

4. What is React Redux?

React Redux is a state management tool which makes it easier to pass these states from one component to another irrespective of their position in the component tree and hence prevents the complexity of the application. As the number of components in our application increases it becomes difficult to pass state as props to multiple components. To overcome this situation we use react-redux.

5. What are the benefits of using react-redux?

There are several benefits of using react-redux such as

• It provides centralized state management i.e. a single store for the whole application
• It optimizes performance as it prevents re-rendering of component
• Makes the process of debugging easier
• Since it offers persistent state management therefore storing data for a long times becomes easier

6. Explain the core components of react-redux.

There are four fundamental concepts of redux in react which decide how the data will flow through components

• Redux Store: It is an object that holds the application state
• Action Creators: These are unctions that return actions (objects)
• Actions: Actions are simple objects which conventionally have two properties- type and payload
• Reducers: Reducers are pure functions that update the state of the application in response to actions

7. How can we combine multiple reducers in React?

When working with Redux we sometimes require multiple reducers. In many cases, multiple actions are needed, resulting in the requirement of multiple reducers. However, this can become problematic when creating the Redux store. To manage the multiple reducers we have function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them.

Syntax

xxxxxxxxxx
5
1
import { combineReducers } from "redux";
2
const rootReducer = combineReducers({
3
    books: BooksReducer,
4
    activeBook: ActiveBook
5
});

8. What is context API?

Context API is used to pass global variables anywhere in the code. It helps when there is a need for sharing state between a lot of nested components. It is light in weight and easier to use, to create a context just need to call React.createContext(). It eliminates the need to install other dependencies or third-party libraries like redux for state management. It has two properties Provider and Consumer.

9. Explain provider and consumer in ContextAPI?

A provider is used to provide context to the whole application whereas a consumer consume the context provided by nearest provider. In other words The Provider acts as a parent it passes the state to its children whereas the Consumer uses the state that has been passed.

10. Explain CORS in React.Axios

In ReactJS, Cross-Origin Resource Sharing (CORS) refers to the method that allows you to make requests to the server deployed at a different domain. As a reference, if the frontend and backend are at two different domains, we need CORS there.

We can setup CORS evironment in frontend using two methods:

• Axios
• fetch

11. What is axios and how to use it in React?

Axios, which is a popular library is mainly used to send asynchronous HTTP requests to REST endpoints. This library is very useful to perform CRUD operations.

• This popular library is used to communicate with the backend. Axios supports the Promise API, native to JS ES6.
• Using Axios we make API requests in our application. Once the request is made we get the data in Return, and then we use this data in our project.

To install aixos package in react use the following command.

xxxxxxxxxx
1
1
npm i axios

12. Write a program to create a counter with increment and decrement.

xxxxxxxxxx
30
1
import React, { useState } from "react";
2
​
3
const App = () => {
4
    const [counter, setCounter] = useState(0)
5
    const handleClick1 = () => {
6
        setCounter(counter + 1)
7
    }
8
​
9
    const handleClick2 = () => {
10
        setCounter(counter - 1)
11
    }
12
​
13
    return (
14
        <div>
15
            <div>
16
                {counter}
17
            </div>
18
            <div className="buttons">
19
                <button onClick={handleClick1}>
20
                    Increment
21
                </button>
22
                <button onClick={handleClick2}>
23
                    Decrement
24
                </button>
25
            </div>
26
        </div>
27
    )
28
}
29
​
30
export default App

Output:

In this example

• The useState hook initializes a state variable counter with a value of 0. The setCounter function is used to update this state.
• When the Increment button is clicked, setCounter(counter + 1) increases the counter value by 1.
• When the Decrement button is clicked, setCounter(counter - 1) decreases the counter value by 1.
• The current value of counter is displayed inside a
  and updates automatically when the state changes.
• Two buttons trigger handleClick1 and handleClick2 using onClick, allowing users to increase or decrease the counter.

13. Explain why and how to update state of components using callback?

It is advised to use a callback-based approach to update the state using setState because it solves lots of bugs upfront that may occur in the future.We can use the following syntax to update the state using a callback.

xxxxxxxxxx
6
1
this.setState(st => {
2
    return(
3
        st.stateName1 = state1UpdatedValue,
4
        st.stateName2 = state2UpdatedValue
5
    )
6
})

14. What is React-Material UI?

React Material UI is a framework built upon React library which contains predefined components to create React applications. Material UI is basically a design language built by Google in 2014 and works with various JavaScript frameworks apart from React such as Angular.js and Vue.js. The quality of the inbuilt designs of Material UI and its easy implementation make it the first choice of most developers. The inbuilt components are also customizable so it helps easily recreate the designs.

15. What is flux architecture in redux?

Flux is an architecture that Facebook uses internally when operating with React. It is merely a replacement quite an architecture that enhances React and also the idea of unidirectional data flow.

16. Explain the useMemo hook in react?

The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don’t need to recompute the function with a given argument for the next time as it returns the cached result. A memoized function remembers the results of output for a given set of inputs.

17. Does React useState Hook update immediately?

React do not update immediately, although it seems immediate at first glance. React keep track of the states by queuing them in the order they are called. React queue all the changes to be made and update once the component Re-render which is not immediate. This is how React knows which value corresponds to which state. It goes as per the queue every time the component tries to re-render.

18. When to use useCallback, useMemo and useEffect ?

• useEffect is a function that can be used as an alternative to lifecycle methods such as componentDidMount, componenetWillUnmount, and componentDidUpdate in functional components
• useCallback can be used when we want to prevent unnecessary renders from the chld components. It helps to resolve side effects
• useMemo is used when we want to re-render based on cache values as makes the application faster

19. Explain the types of router in React?

There are three types of routers in React:

• Memory Router: The memory router keeps the URL changes in memory not in the user browsers.
• Browser Router: It uses HTML5 history API (i.e. pushState, replaceState, and popState API) to keep your UI in sync with the URL
• Hash Router: Hash router uses client-side hash routing. It uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

20. What is StrictMode in React?

The React StrictMode can be viewed as a helper component that allows developers to code efficiently and brings to their attention any suspicious code which might have been accidentally added to the application. The StrictMode can be applied to any section of the application, not necessarily to the entire application.

xxxxxxxxxx
11
1
import React from "react";
2
import ReactDOM from "react-dom/client";
3
import App from "./App";
4
​
5
const root = ReactDOM.createRoot(document.getElementById("root"));
6
​
7
root.render(
8
    <React.StrictMode>
9
        <App />
10
    </React.StrictMode>
11
);

21. What is Conditional Rendering in React?

Conditional rendering in React means dynamically displaying components or elements based on a condition. Instead of rendering everything at once, React decides what to render based on the current state, props, or logic. We can use conditional rendering when:

• We have to Show/hide UI elements based on user authentication.
• Display different layouts based on user roles.
• Render UI dynamically based on API responses.
• Show loading spinners while fetching data.

22. What is React Router?

React Router is a library for handling navigation in React applications. It allows developers to create single-page applications (SPAs) with multiple views while maintaining a smooth, seamless user experience without full-page reloads.

Let's now create the simple react router.

xxxxxxxxxx
23
1
// App.js
2
import React from "react";
3
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
4
​
5
// Components for different pages
6
const Home = () => <h2>Home Page</h2>;
7
const About = () => <h2>About Page</h2>;
8
​
9
const App = () => {
10
    return (
11
        <Router>
12
            <nav>
13
                <Link to="/">Home</Link> | <Link to="/about">About</Link>
14
            </nav>
15
            <Routes>
16
                <Route path="/" element={<Home />} />
17
                <Route path="/about" element={<About />} />
18
            </Routes>
19
        </Router>
20
    );
21
};
22
​
23
export default App;

xxxxxxxxxx
10
1
//index.js
2
import React from "react";
3
import ReactDOM from "react-dom/client";
4
import App from "./App";
5
​
6
// Create a root element
7
const root = ReactDOM.createRoot(document.getElementById("root"));
8
​
9
// Render the App component
10
root.render(<App />);

Output

In this example

• The code imports React to create components and ReactDOM to render the app to the browser.
• Instead of ReactDOM.render(), we use ReactDOM.createRoot() to create a "root" where our app will be attached in the DOM.
• document.getElementById("root") grabs the div element with the id="root" in your index.html. This is where the React app will be rendered.
• root.render(<App />) tells React to render the App component inside the root element created earlier.

Note: React 18 introduces this new way of rendering the app. The createRoot() method is now used instead of the old render() method to improve performance and enable new features like concurrent rendering.

23. What is the difference between the React Hooks and Classes?

24. How Data is passed between the React Components?

In React, data is passed between components using props. The way data flows between components depends on whether they are parent-child, sibling components, or if you're using state management techniques like context or Redux.

25. What is Lazy Loading in React?

Lazy Loading in React is a technique used to load components only when they are needed, instead of loading everything at once when the app starts. This helps improve the performance of the app by reducing the initial loading time. In React, React.lazy() is used to implement lazy loading for components, which allows you to split your code into smaller bundles and load them only when required.

26. Explain Redux and its components.

Redux is a state management library that helps manage the application state globally. React-Redux is used to connect Redux state to React components. There are the three main components of the redux:

• store: It holds the application state
• actions: It describe what to do
• reducers: It define how the state changes in response to actions

27. How React Routing is different from Conventional Routing?

React Routing is used in Single Page Applications (SPAs), while conventional routing typically applies to multi-page applications. Here’s how they differ:

28. How to avoid binding in ReactJS?

In ReactJS, binding in the context of event handlers is often required to ensure that the correct this context is available inside class methods. However, it can lead to boilerplate code and performance issues, especially when binding functions in each render cycle. We can avoid binding in ReactJS by using the below methods:

• Arrow Functions
• Higher-Order Components (HOCs) or Custom Hooks

29: What are props in React?

In React, props (short for "properties") are a way of passing data from a parent component to a child component. Props are read-only and are used to customize or control the behavior of a component. They help make components reusable and dynamic by allowing different data to be passed into them.

30. What is the use of CSS modules in React?

CSS Modules help you keep your styles specific to each React component, so they don't affect other components. In simple terms, it lets you write CSS for one component without worrying about messing up the styles of other parts of your app. This is especially useful when your app grows larger and has many components, making it easier to manage styles without conflicts.

Conclusion

ReactJS is an essential JavaScript library for building dynamic, high-performance UIs with reusable components. Mastering advanced topics like custom hooks, Redux, performance optimization, and state management will help you excel in React job interviews and advance your career in 2025.