Advanced Level React Interview Questions & Answers – Set 3

1. What is the difference between synchronous rendering and concurrent rendering?

• Synchronous (old React): Once rendering starts, React cannot stop until done → UI may freeze.
• Concurrent (React 18+): Rendering can pause, resume, or restart. React prioritizes urgent updates like typing.

Example:

Typing stays smooth even if filtering is slow.

import { startTransition } from "react";

startTransition(() => {
  setSearchResults(heavyFiltering(query));
});

2. What is an isomorphic/universal React application?

• Isomorphic/Universal = Same React code runs on server (SSR) and client (browser).
• Benefit → better SEO + faster first load.

Example: Next.js app = server renders HTML, then client hydrates it.

3. How would you implement infinite scrolling in React?

Load more data when user scrolls near the bottom.

Example:

function InfiniteList() {
  const [items, setItems] = useState([...Array(20).keys()]);

  useEffect(() => {
    const onScroll = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2) {
        setItems(prev => [...prev, ...Array(20).keys()].flat());
      }
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return <ul>{items.map(i => <li key={i}>Item {i}</li>)}</ul>;
}

4. What are anti-patterns in React state management?

•  Mutating state directly (state.push()).
•  Storing derived data in state (e.g., list length).
•  Too many contexts causing re-renders.
•  Passing props too deep.
•  Use immutability, derived values, or context selectors.

5. How do you debug performance issues in React apps?

• Use React DevTools Profiler.
• Use React.memo, useMemo, useCallback to avoid wasted renders.

Example:

function List({ items }) { ... }
export default React.memo(List); //  rerenders only if items change

6. What is tree-shaking and how does it benefit React apps?

• Tree-shaking: Removes unused code from final bundle.
• Benefit → smaller file size, faster load.

Example:

import { map } from "lodash-es"; // only map is included in bundle

7. How do React.lazy and Suspense help with code-splitting?

• Load component only when needed.
• Helps reduce bundle size.

Example:

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

<Suspense fallback={<div>Loading...</div>}>
  <Chart />
</Suspense>

8. What is the difference between micro-frontends and monolithic React apps?

• Monolithic: One big React app.
• Micro-frontends: Multiple small independent apps combined.

Example: E-commerce → cart, search, and product page as separate micro-apps.

9. How would you design a scalable folder structure for a large React app?

Example:

src/
 ├─ components/   # shared UI
 ├─ features/     # feature-specific code
 ├─ hooks/        # custom hooks
 ├─ pages/        # route-based pages
 ├─ store/        # global state
 ├─ utils/        # helper functions

10. How does React’s selective hydration work in concurrent rendering?

• React hydrates only visible parts first.
• Example: Header + above-the-fold content hydrate first, footer later → faster load.

11. What are React Flight and Server Components?

• React Flight = protocol to send server-rendered UI pieces to client.
• Allows Server Components → heavy logic on server, no JS bundle needed on client.

12. How does React handle interruptible rendering?

• React can pause rendering when user interacts, then resume later.
• Example: While rendering a big list, if user types, React updates input first.

13. What is the difference between edge rendering and server-side rendering (SSR)?

• SSR: Runs on central server.
• Edge rendering: Runs at CDN edge (closer to user).
• Edge = lower latency, faster response.

14. How do you integrate React with WebAssembly (WASM)?

• Use WASM for performance-heavy tasks (math, image processing).

Example:

import wasmModule from "./math.wasm";

wasmModule.then(mod => {
  console.log(mod.add(2, 3)); // WASM does it faster
});

15. How would you implement multi-tenant theming in React?

• Different customers/brands get different themes.

Example:

<ThemeProvider theme={brand === "nike" ? nikeTheme : adidasTheme}>
  <App />
</ThemeProvider>

16. How does React’s Offscreen API improve rendering?

• Render UI in background (hidden), keep it ready.
• Example: Chat sidebar rendered offscreen → appears instantly when opened.

17. What is the difference between client-driven and server-driven navigation?

• Client-driven (React Router): All handled in browser.
• Server-driven (Next.js/Remix): Server decides what HTML/data to send.

18. How does React handle microtasks vs macrotasks during rendering?

• Microtasks (Promises): Higher priority.

• Macrotasks (setTimeout): Lower priority.

  React uses microtasks to make rendering smoother.

19. What are progressive hydration strategies?

• Hydrate app piece by piece instead of full page at once.
• Example: Nav bar hydrates first, body later → faster usable UI.

20. How does React’s new use() hook help?

Lets you directly read async data (promises) in Server Components.

Example:

function Page() {
  const data = use(fetch("/api/data").then(r => r.json()));
  return <div>{data.title}</div>;
}

21. What are Partial Hydration and Streaming SSR?

• Partial Hydration: Only hydrate interactive parts.
• Streaming SSR: Send HTML chunks progressively to client.
• Difference → Streaming = send piece by piece; Partial = hydrate only what’s needed.

22. How would you design multi-window state synchronization in React?

Use localStorage or BroadcastChannel.

Example:

const bc = new BroadcastChannel("app-state");
bc.onmessage = (e) => setState(e.data);

23. How does React interact with Web Workers?

• Offload heavy calculations to worker thread.

Example:

const worker = new Worker("worker.js");
worker.postMessage({ numbers: [1,2,3] });

24. How do you handle priority-based rendering in Suspense?

• Nested <Suspense> → React decides priority.

Example:

<Suspense fallback={<Spinner />}>
  <Profile />
  <Suspense fallback={<MiniLoader />}>
    <Comments />
  </Suspense>
</Suspense>

25. What is the difference between Static Imports and Module Federation in micro-frontends?

• Static imports: Code bundled at build time.
• Module Federation: Load remote code at runtime.

Example: Cart app loads from separate micro-frontend using Module Federation.