Top 20 React.js Interview Questions and Answers for Intermediate Developers (2025 Guide)

• kishandetroja90
• 0
• Posted on May 8, 2025May 8, 2025

1. What is the difference between useEffect and useLayoutEffect?

• useEffect runs asynchronously after the DOM is painted.
• useLayoutEffect runs synchronously before the DOM paint, which is useful for measuring layout or triggering reflows.
  Use useLayoutEffect only when necessary to avoid blocking the paint.

2. How does the virtual DOM work in React?
React maintains a lightweight in-memory representation of the real DOM (virtual DOM). On updates, it compares the new virtual DOM with the previous one using a diffing algorithm and updates only the changed parts in the real DOM, improving performance.

3. What is the Context API and when should you use it?
The Context API provides a way to pass data (like themes, user info) through the component tree without manually passing props. Use it when multiple components need access to the same data without prop drilling.

4. What are controlled and uncontrolled components?

• Controlled components: Form elements whose value is managed by React state.
• Uncontrolled components: Use refs to access DOM elements directly.
  Controlled components are preferred for predictable behavior.

5. How would you optimize a React component’s performance?

• Use React.memo for memoizing components
• Use useCallback and useMemo to avoid unnecessary re-renders
• Code splitting with React.lazy
• Avoid anonymous functions in JSX
• Keep component tree shallow

6. What are the rules of hooks?

• Only call hooks at the top level (not inside loops or conditions)
• Only call hooks from React function components or custom hooks
  Violating these rules can lead to unpredictable behavior.

7. How does useMemo differ from useCallback?

• useMemo returns a memoized value
• useCallback returns a memoized function
  Both help avoid unnecessary recalculations or re-renders.

8. Explain how useReducer works and when to use it.
useReducer is an alternative to useState for complex state logic.

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

It’s ideal when state updates depend on previous state or involve multiple sub-values.

9. What are custom hooks?
Custom hooks are reusable functions that start with use and encapsulate hook logic.
Example:

function useCounter() {
  const [count, setCount] = useState(0);
  return [count, () => setCount(count + 1)];
}

10. How can you persist state across refreshes or tabs?
Use localStorage, sessionStorage, or IndexedDB with useEffect to sync and restore state.

11. What are higher-order components (HOCs)?
An HOC is a function that takes a component and returns a new component with additional props or behavior.
Example:

const withLogger = (WrappedComponent) => (props) => {
  console.log("Props:", props);
  return <WrappedComponent {...props} />;
};

12. How would you handle component composition and reuse logic?

• Use children and props to build flexible components
• Use custom hooks to extract shared logic
• Use HOCs or render props for cross-cutting concerns

13. What is the purpose of keys in lists?
Keys help React identify which items have changed, are added, or removed. They should be unique and stable for each item.

14. What is prop drilling and how can you avoid it?
Prop drilling is passing props through many layers of components. Avoid it by using the Context API or state management libraries like Redux or Zustand.

15. How would you structure a large-scale React app?

• Group files by feature (feature folders)
• Use separate folders for components, hooks, services, and context
• Use lazy loading for routes
• Apply consistent naming and testing practices

16. What is React Router and how does it manage navigation?
React Router enables navigation between views. It uses BrowserRouter, Route, Link, and useNavigate to manage routes and URL history in SPA architecture.

17. How does code-splitting work in React?
Code-splitting lets you load parts of your app on demand. Use React.lazy and Suspense to load components only when needed:

const LazyComponent = React.lazy(() => import('./Component'));

18. What is the role of Webpack or Vite in a React project?
They are bundlers that compile JavaScript, CSS, and other assets into optimized bundles for deployment. Vite is faster for development due to native ES modules.

19. How do you test React components?
Use Jest and React Testing Library:

• Write unit tests for logic
• Use render, fireEvent, and screen to simulate user interaction
• Avoid testing implementation details

20. What are some common anti-patterns in React?

• Using index as a key in lists
• Too many states in one component (God component)
• Mutating state directly
• Using props for state
• Overusing context or global state

The End!