Intermediate Level React Interview Questions & Answers – Set 3

Q1. What is React’s reconciliation algorithm?

• React determines what to update by comparing the old and new Virtual DOM trees.
• This comparison process is called reconciliation.

Q2. How does React diff two Virtual DOM trees?

• Compares elements node-by-node.
• If element type changes → replace the node.
• If type is same → update only changed props.

Q3. What is React.memo, and when should you use it?

Prevents re-rendering when props haven’t changed.

const Child = React.memo(function Child({ name }) {
  return <div>{name}</div>;
});

Q4. How do you prevent unnecessary re-renders in child components?

• React.memo() to memoize components.
• useCallback() for stable function references.
• useMemo() for expensive calculations.

Q5. What is the difference between debouncing and throttling?

Q6. How do you implement infinite scroll with IntersectionObserver?

Observe the last list element, and when it appears in the viewport, trigger data loading.

Q7. What is code-splitting, and how does it help performance?

• Splits large JS bundles into smaller lazy-loaded chunks.
• Reduces initial load time.

Q8. How do you implement dynamic imports in React?

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

Q9. How do you optimize large lists with react-window or react-virtualized?

• They render only visible rows/items instead of the entire list.
• Greatly improves performance for thousands of entries.

Q10. What are derived states, and why can they be problematic?

• State calculated from other states.
• Can go out of sync if not updated correctly.
• Prefer computing values directly during render or with useMemo.

Q11. What are error boundaries, and how do you implement them?

Components that catch runtime errors in child components.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;
  }
}

Q12. Which errors cannot be caught by error boundaries?

• Inside event handlers
• In asynchronous code (setTimeout, Promises)
• During server-side rendering

Q13. How do you test a component with async API calls?

Use waitFor from React Testing Library to wait for elements after async updates.

Q14. What’s the difference between shallow and full rendering?

Q15. What advantages does React Testing Library have over Enzyme?

• Focuses on user behavior, not internal implementation.
• Encourages testing what the user sees and does.

Q16. How do you simulate user events in React Testing Library?

import { fireEvent } from "@testing-library/react";
fireEvent.click(button);

Q17. How do you test forms and user inputs effectively?

Use:

fireEvent.change(input, { target: { value: "hello" } });

or

await userEvent.type(input, "hello");

Q18. What is snapshot testing in React?

• Captures component output as a snapshot file.
• Future runs compare output to detect unintended UI changes.

Q19. How do you mock API calls in tests?

• Use jest.mock() for modules or
• msw (Mock Service Worker) to intercept HTTP requests.

Q20. How do you test React hooks separately?

Use renderHook from @testing-library/react-hooks.

const { result } = renderHook(() => useCounter());
expect(result.current.count).toBe(0);

Q21. What new features were introduced in React 18?

• Concurrent Rendering
• Automatic Batching
• useId hook
• startTransition for smoother state updates

Q22. What is the purpose of React.StrictMode?

• Detects potential issues in development.
• Intentionally double-invokes some functions to highlight side-effect bugs.

Q23. How do you handle global event listeners with hooks?

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

Q24. What are portals, and when would you use them?

Render a component outside the main DOM hierarchy — ideal for modals or tooltips.

ReactDOM.createPortal(<Modal />, document.getElementById("modal-root"));

Q25. How do you ensure accessibility (a11y) in React apps?

• Use semantic HTML tags.
• Add appropriate aria-* attributes.
• Ensure keyboard navigation works.
• Test with screen readers.