Top React JS Interview Questions and Answers for Developers (2026)

1. Why do we need react js?

Because it’s a single page application which uses router that allows us to use multiple routes within a single page application, code resuability. React uses diffing algorithm which works with virtual dom make it superfast as compare to other frontend libraries.

2. What is DOM? Document Object Model.

It’s basically a tree-like structure that represents everything in a web page — like HTML elements (, , , etc.) — so that JavaScript can access and change them.

3. What is virtual DOM?

DOM is document object model react uses two virtual dom one holds the states of the real dom when we make any changes it compares with each other. It uses diffing algorithms and then it takes the difference of virtual dom and uses the reconciliation process to update only updated part on the real dom.

4. Why virtual DOM is Fast and why we use two virtual dom we can take one real dom and one virtual dom and do the compares?

React uses two virtual dom because in real dom one element has 100 and 1000 of properties and in virtual dom it take only 5 to 10 properties which is easy and faster to compare with virtual dom as compare to real dom.

5. What is Babel?

Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript. React uses Babel to convert JSX into JavaScript.

6. What is State and useState?

UseState is a hook in react that let you create setter and getter of any variable whenever that variable update react re-rendered that component, allows functional components to use state State is like a memory for your component. It’s how your component remembers information between renders.

7. Why Vite reload is faster?

Vite is faster than Webpack mainly because it uses native ES modules and doesn’t bundle the whole app at startup. Instead, it compiles and serves files only when the browser requests them. This makes the development server start almost instantly. Vite also uses a tool called esbuild, which is much faster than traditional JavaScript bundlers. And when you make changes in your code, Vite updates only that specific part using fast Hot Module Replacement, without refreshing the whole page. All of this makes Vite very quick and efficient for development.

8. What is the significance of React Fragments?

React Fragments let you group multiple elements without adding extra nodes to the DOM. Example:

<>
 <Child1 />
 <Child2 />
</>

9. What are React Hooks?

Hooks are special functions introduced in React 16.8 that let you use state and other React features inside functional components, without writing class components.

useState Purpose: Adds local state to function components. How it works: Returns a state variable and a function to update it. Updating state causes a re-render.

const [count, setCount] = useState(0);

Use case: Counters, toggles, form inputs.

useEffect Purpose: Handles side effects like API calls, timers, or DOM updates. How it works: Runs after the component renders. You can control when it runs using dependencies.

useEffect(() => {
 fetchData();
}, []);

Use case: Fetching data, subscriptions, updating title, cleanup on unmount.

useContext Purpose: Access global data from a context provider without prop drilling. How it works: Consumes the nearest value from a Context.

const user = useContext(UserContext);

Use case: Theme, authentication, language settings.

useRef Purpose: Provides a mutable reference to a DOM element or value that persists across renders without triggering a re-render.

const inputRef = useRef(null);

Use case: Accessing DOM nodes, tracking previous values, timers.

useMemo Purpose: Memoizes a calculated value to avoid expensive recalculations on every render.

const total = useMemo(() => a + b, [a, b]);

Use case: Performance optimization when dealing with heavy calculations.

React.memo A higher-order component (HOC) that memoizes a component, Prevents a component from rerendering if its props haven’t changed.

useCallback useCallback is a React Hook that returns a memoized version of a callback function. It’s mainly used to prevent unnecessary re-creation of functions on every render.

const handleClick = useCallback(() => doSomething(), []);

Use case: Passing stable functions to child components, improving performance.

useMemo → Cache values (expensive calculations). useCallback → Cache functions (so they don’t break React.memo). React.memo → Cache components (so they don’t re-render unnecessarily).

useReducer Purpose: Alternative to useState for complex state logic (e.g. with multiple related values).

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

Use case: Managing form state, toggle logic, or complex updates.

useLayoutEffect Purpose: Same as useEffect, but fires before the browser paints the screen.

useLayoutEffect(() => {
 // measure layout or set scroll
}, []);

Use case: Measuring DOM size, synchronously reading layout before paint.

Custom hook A custom hook is a way to share reusable logic between components without repeating code.

10. What is the significance of keys in React lists?

Keys help React identify which items changed, are added, or removed. They should be unique and stable.

11. How does React handle prop drilling, and what’s the solution?

Prop drilling is passing data through many layers. Solutions include Context API, Redux, Zustand, etc.

12. What is Redux, and why might you use it with React?

Redux is a state management library commonly used in large applications. It provides a single global store to manage state and uses actions and reducers to update that state in a predictable way. Redux helps manage complex state logic and enables consistent behavior across different parts of an app.

13. Why Redux over Context API?

Context is good for small apps but not optimized for complex state changes (it can re-render too many components). Redux provides structured state management, middleware, and dev tools for debugging.

14. What are Redux middlewares?

Functions that sit between dispatching(sending an action) an action and the reducer (takes the current state and an action then returns a new state.). Used for logging, async operations (API calls), etc.

15. What are Redux toolkit?

Redux Toolkit is the official way to write Redux now. It reduces boilerplate by combining reducers and actions into slices, simplifies immutable updates with Immer, and handles async logic via createAsyncThunk. It also configures the store with DevTools and middleware out of the box.

16. What is React-Redux?

React-Redux is the official library that connects Redux with React. It allows React components to access data from the Redux store and dispatch actions to update that data. React-Redux provides helpful tools such as the component to supply the store to your app, useSelector to read state values, and useDispatch to send actions. This makes state management in React apps cleaner, more organized, and scalable, especially in larger projects.

17. Explain React Router.

React Router is a library for handling client-side routing in React. It enables navigation without page reloads.

18. How does React handle forms?

Forms are handled using controlled components where input values are bound to state.

19. What is the purpose of the componentWillUnmount lifecycle method in class components?

It is used to clean up effects (unsubscribe, clear intervals) before the component is removed from the DOM.

20. What are React Hooks rules?

1. Only call hooks at the top level.
2. Only call hooks from React function components or custom hooks.

21. Explain the concept of server-side rendering (SSR) in React.

Rendering components on the server and sending HTML to the client. Improves SEO and initial load speed. E.g., Next.js.

22. What is the purpose of the React.StrictMode component?

Helps identify potential problems by activating extra checks and warnings during development.

23. How does React handle routing?

React Router provides , , , and useParams() for SPA routing.

25. Explain the concept of controlled and uncontrolled components in React.

Controlled Components A controlled component is a component where the form data is handled by React state. The input’s value is set via a state variable, and every change updates that state using onChange. Uncontrolled Components An uncontrolled component is where the form data is handled by the DOM itself, not React. Instead of React state, you use refs to access the current value when needed.

26. What are the main features of React?

JSX (JavaScript XML) Component-based architecture Virtual DOM Unidirectional data flow Declarative UI

27. What is the difference between functional and class components?

Functional: Simpler, use hooks. Class: Use lifecycle methods.

28. What is the difference between useEffect and useLayoutEffect?

useEffect: Runs after DOM painting. useLayoutEffect: Runs before painting; useful for DOM measurements.

29. How do you manage state in a React application?

Local: useState, useReducer Global: Context API, Redux, Zustand Server: React Query, SWR

30. What is Diffing Algorithm?

It's the process React uses to compare virtual DOM trees and update only the changed parts.

31. What is event in React?

A synthetic event triggered by user actions (e.g., onClick, onChange).

32. What are the components in Redux?

Actions Reducers Store

33. What is HOC (High Order Component)?

Function that takes a component and returns a new component with enhanced behavior.

34. What is lazy loading?

Defers loading of a component until it's needed. Implemented using React.lazy() and Suspense.

35. What is a Memory Leak?

A memory leak occurs when your application keeps data in memory that is no longer needed. In React, this often happens when a component unmounts (means that a component is removed from the UI/DOM), but some ongoing process still references it, preventing garbage collection.