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.