Top 50 React Js Interview questions for experienced Developer

1. What is the Virtual DOM and how does React use it?

The Virtual DOM is a lightweight copy of the real DOM. React uses it to detect changes by comparing the previous and current virtual DOM trees, then efficiently updates only the changed parts in the real DOM.

2. How does React’s reconciliation algorithm work?

React compares the new virtual DOM with the previous one using a diffing algorithm. It identifies changes and updates only the affected nodes in the real DOM, improving performance.

3. What are React Hooks and why are they useful?

Hooks are functions like useState and useEffect that let you use state and lifecycle features in functional components, making code cleaner and more reusable.

4. What is the difference between useEffect and useLayoutEffect?

useEffect runs asynchronously after paint, while useLayoutEffect runs synchronously before the browser paints. useLayoutEffect is useful for DOM measurements or layout adjustments.

5. How does React handle state updates in batches?

React batches multiple state updates into a single re-render to optimize performance. In React 18+, batching also works in asynchronous contexts like timeouts and promises.

6. What is the purpose of React.memo?

React.memo is a higher-order component that prevents unnecessary re-renders by memoizing the result. It only re-renders if props change.

7. How do you optimize performance in large React applications?

Use techniques like code splitting, lazy loading, memoization (React.memo, useMemo), virtualization (react-window), and avoiding unnecessary re-renders with useCallback.

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

Controlled components rely on React state to manage form inputs, while uncontrolled components use refs to access DOM values directly.

9. What are error boundaries in React?

Error boundaries are components that catch JavaScript errors in their child component tree and render a fallback UI instead of crashing the app.

10. How does React Context API work?

The Context API allows you to share state across components without prop drilling. You create a context, provide a value, and consume it using useContext or a Context.Consumer.

11. What is the difference between useMemo and useCallback?

useMemo memoizes a computed value, while useCallback memoizes a function. Both help avoid unnecessary recalculations or re-renders.

12. What is the role of keys in React lists?

Keys help React identify which items have changed, are added, or removed. They improve performance and help maintain component state across renders.

13. How does React handle forms?

React handles forms using controlled components, where form data is managed by React state, or uncontrolled components using refs.

14. What is the difference between props and state?

Props are read-only and passed from parent to child. State is managed within the component and can change over time.

15. What is the purpose of useRef?

useRef returns a mutable ref object that persists across renders. It’s commonly used to access DOM elements or store mutable values.

16. How do you implement lazy loading in React?

Use React.lazy to load components dynamically and Suspense to show fallback content while loading.

17. What is the difference between componentDidMount and useEffect?

componentDidMount is a lifecycle method in class components. useEffect with an empty dependency array replicates this behavior in functional components.

18. What is the purpose of useReducer?

useReducer is an alternative to useState for managing complex state logic. It’s similar to Redux reducers and is useful for state transitions.

19. How do you handle side effects in React?

Side effects like data fetching or subscriptions are handled using useEffect in functional components or lifecycle methods in class components.

20. What is the difference between React and ReactDOM?

React provides the core library for building components. ReactDOM handles rendering those components to the DOM in web applications.

21. What is JSX and why is it used in React?

JSX stands for JavaScript XML. It allows you to write HTML-like syntax in JavaScript, which is then transpiled to React.createElement calls. It improves readability and makes component structure more intuitive.

22. How do you handle conditional rendering in React?

You can use JavaScript conditional operators like if-else, ternary expressions, or logical && to conditionally render elements inside JSX.

23. What is the difference between mounting and unmounting in React?

Mounting is when a component is inserted into the DOM. Unmounting is when it is removed. Lifecycle methods like componentDidMount and componentWillUnmount handle these phases.

24. What is the purpose of StrictMode in React?

StrictMode is a development tool that highlights potential problems in an application, such as unsafe lifecycle methods or deprecated APIs. It does not affect production builds.

25. How do you handle global state in React?

You can use Context API, Redux, Zustand, or Recoil to manage global state across components in a React application.

26. What is the difference between SSR and CSR in React?

SSR (Server-Side Rendering) renders HTML on the server before sending it to the client. CSR (Client-Side Rendering) renders content in the browser using JavaScript. SSR improves SEO and initial load time.

27. What is hydration in React?

Hydration is the process where React attaches event listeners and state to the server-rendered HTML on the client side, making it interactive.

28. What is the use of forwardRef in React?

forwardRef allows you to pass a ref through a component to one of its children, enabling parent components to access child DOM nodes or React elements.

29. How do you test React components?

You can use testing libraries like React Testing Library or Enzyme along with Jest to write unit and integration tests for React components.

30. What is the difference between shallow rendering and full rendering?

Shallow rendering renders only the component being tested, not its children. Full rendering (mounting) renders the component and all its descendants.

31. What is the use of useImperativeHandle?

useImperativeHandle customizes the instance value exposed to parent components when using refs, allowing you to expose specific methods or properties.

32. How do you handle memory leaks in React?

Clean up subscriptions, timers, and async operations in useEffect’s cleanup function or componentWillUnmount to prevent memory leaks.

33. What is the difference between useEffect and useInsertionEffect?

useInsertionEffect is a new hook used for injecting styles before layout and paint. It runs synchronously before useLayoutEffect and is useful for CSS-in-JS libraries.

34. What is suspense in React?

Suspense lets you wait for some code to load or data to be fetched before rendering a component. It works with lazy-loaded components and concurrent features.

35. What is the difference between useTransition and useDeferredValue?

useTransition lets you mark updates as non-urgent, while useDeferredValue delays updating a value until less urgent updates are complete. Both help with UI responsiveness.

36. What is the purpose of useId in React?

useId generates unique IDs that are consistent across server and client, useful for accessibility attributes like aria-labelledby in SSR apps.

37. How do you handle accessibility in React?

Use semantic HTML, ARIA attributes, keyboard navigation, and tools like eslint-plugin-jsx-a11y to ensure accessible React components.

38. What is the difference between useEffect and useInsertionEffect?

useInsertionEffect is used for injecting styles before layout and paint, while useEffect runs after paint. useInsertionEffect is useful for CSS-in-JS libraries.

39. What is the difference between useLayoutEffect and useEffect?

useLayoutEffect runs synchronously after all DOM mutations but before the browser paints. useEffect runs asynchronously after paint. useLayoutEffect is better for measuring layout.

40. What is the difference between React 17 and React 18?

React 18 introduced concurrent rendering, automatic batching, useTransition, and startTransition APIs, improving performance and responsiveness.

41. What is the role of React DevTools?

React DevTools is a browser extension that helps inspect component hierarchies, props, state, and performance profiling in React applications.

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

Class components use ES6 classes and lifecycle methods. Functional components are simpler, use hooks, and are preferred in modern React development.

43. What is the purpose of useDebugValue?

useDebugValue is used to display custom hook values in React DevTools for debugging purposes.

44. What is the difference between useEffect and useMemo?

useEffect runs side effects after render. useMemo memoizes a computed value to avoid recalculating it on every render.

45. What is the difference between useCallback and useMemo?

useCallback memoizes a function, while useMemo memoizes a value. Both help prevent unnecessary re-renders or recalculations.

46. What is the purpose of React.Fragment?

React.Fragment lets you group multiple elements without adding extra nodes to the DOM. It helps keep the DOM clean.

47. What is the difference between children and props.children?

children is a prop automatically passed to every component that represents the content between its opening and closing tags. props.children accesses that content.

48. What is the difference between hydration and rendering?

Rendering creates the DOM from scratch. Hydration attaches event listeners to existing server-rendered HTML to make it interactive.

49. What is the difference between useEffect and useReducer?

useEffect handles side effects like data fetching. useReducer manages complex state logic and transitions, similar to Redux reducers.

50. What is the difference between React Native and React?

React is used for building web applications. React Native is used for building native mobile apps using React components that render to native UI elements.