Set 4: Super Hard / Expert Level (with Answers)

1. What are the phases of the React component lifecycle?
👉 For class components:

• Mounting (constructor → render → componentDidMount)

• Updating (shouldComponentUpdate → render → componentDidUpdate)

• Unmounting (componentWillUnmount)

• Error Handling (componentDidCatch)

Hooks manage lifecycle differently via useEffect.

2. How does React decide when to re-render a component?
👉 If props or state change (with different reference/value) and depending on shouldComponentUpdate (class) or React.memo (functional).

3. What is the difference between Context vs Redux vs Recoil?
👉

• Context: Good for simple global states like theme, auth.

• Redux: Centralized store, middleware support (e.g., async actions, complex apps).

• Recoil: Atom-based fine-grained state management — better performance for huge apps with minimal re-renders.

4. What are React Server Components (RSC)?
👉 New experimental feature where components are rendered fully on the server, never sent to the client as JS — smaller bundle size, faster apps.

5. Explain the Virtual DOM diffing algorithm (React’s reconciliation process).
👉

• Compares old vs new virtual DOM tree.

• If nodes are of different types → destroy old node and build new.

• If types match → do a deep diff on attributes and recursively on children.

6. How can React optimize performance for deeply nested components?
👉

• React.memo,

• useMemo, useCallback,

• windowing (react-window),

• Avoid unnecessary context updates,

• Split huge trees into smaller pieces.

7. What is the difference between debounce and throttle? Where would you use them in React?
👉

• Debounce: Wait a certain time after last call (ex: search input).

• Throttle: Limit execution to once every interval (ex: scroll event).
  Use lodash.debounce and lodash.throttle for these.

8. How does React handle asynchronous rendering?
👉 With Concurrent Features — React can pause, interrupt, abort, or reuse work.

9. How would you cancel an API request in React if the component unmounts?
👉

• Using AbortController:

useEffect(() => {
  const controller = new AbortController();
  fetch('url', { signal: controller.signal });

  return () => controller.abort();
}, []);

10. What is a Suspense List?
👉 A way to coordinate multiple Suspense components and control their reveal order to avoid ugly “pop-in” content.

11. What is hydration mismatch in SSR (Server-Side Rendering)?
👉 When server-rendered HTML does not match the client-side React tree → React throws warnings.

12. How does React batch multiple setState calls?
👉

• In event handlers, React batches multiple state updates into a single render.

• In async code (like setTimeout), you must wrap updates inside unstable_batchedUpdates() or manually batch.

13. What is Priority-based scheduling in React?
👉 React assigns priorities to different updates (e.g., urgent for typing vs non-urgent for background updates) and schedules rendering accordingly (based on expiration time).

14. Explain the working of React.lazy and dynamic imports.
👉

• React.lazy loads components on-demand (dynamic imports under the hood).

• Bundles the code separately (chunk splitting).

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

15. How do Suspense and Error Boundaries differ?
👉

• Suspense handles loading asynchronous code/resources.

• Error Boundary catches JavaScript errors in children components.

16. How to optimize React apps for SEO?
👉

• Use Server-Side Rendering (Next.js)

• Use correct <title>, <meta> tags

• Pre-render critical pages.

17. What is the key prop’s role in React internal architecture?
👉

• Key tells React how to efficiently update children lists —
  Without key → destroy and recreate DOM nodes unnecessarily.

18. Explain the concept of stale closures in React hooks.
👉

• When closures inside useEffect or event handlers access outdated states/props because they captured old values at the time of definition.

19. How do you implement Infinite Scrolling in React?
👉

• Use Intersection Observer API or listen to scroll events → fetch more items when reaching bottom.

20. What is the difference between prop drilling vs state lifting?
👉

• Prop drilling: passing props down multiple layers unnecessarily.

• State lifting: moving shared state up to a common parent to manage flow properly.

21. What is React Hooks rules? (Rules of Hooks)
👉

• Only call hooks at the top level.

• Only call hooks inside React functions (components or custom hooks).

22. How does the Suspense fallback mechanism work internally?
👉

• When React encounters a Suspense boundary and the content inside isn’t ready → it immediately shows the fallback until the child resolves.

23. How can React handle concurrent user actions (like typing + fetching)?
👉

• With useTransition, startTransition() to mark updates as non-urgent → keeps typing smooth.

onst [isPending, startTransition] = useTransition();
startTransition(() => {
  setInput(val);
});

24. What is the Profiler API in React?
👉

• React Profiler measures performance — how much time a component takes to render, re-render, and when.

25. What is the difference between SSR, SSG, CSR, and ISR?
👉

• SSR: Server Side Rendering (dynamic) — Next.js.

• SSG: Static Site Generation (pre-rendered at build time).

• CSR: Client Side Rendering (browser renders everything).

• ISR: Incremental Static Regeneration (Next.js can rebuild static pages on-demand).