React Advanced Topics — Interview Questions & Answers

Ques 1: What are Advanced Topics in React?

Ans: Advanced topics in React go beyond basic components and state. They include Portals, Suspense, Server-Side Rendering (SSR), React Fiber, Concurrent Rendering, and Strict Mode — all focused on improving performance, scalability, and developer experience.

Ques 2: What is a React Portal?

Ans: A Portal allows rendering a component’s content outside its parent DOM hierarchy, while maintaining the same React tree.

Used for modals, popups, and tooltips.

Example:

ReactDOM.createPortal(
  <div className="modal">Hello!</div>,
  document.getElementById('modal-root')
);

Ques 3: Why use React Portals?

• To render elements outside the parent component (e.g., modals).

• To avoid CSS overflow and z-index issues.
• To maintain event bubbling within React’s hierarchy.

Ques 4: What is React Suspense?

Ans: Suspense allows React to wait for something (like data or code) before rendering a component.

It’s commonly used with lazy loading and data fetching.

Example:

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

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

Ques 5: What is the difference between Suspense and Error Boundaries?

Feature	Suspense	Error Boundary
Purpose	Waits for data or lazy-loaded components	Catches JavaScript errors
Fallback	Loading UI	Error UI
Usage	<Suspense fallback={...}>	<ErrorBoundary>

Ques 6: What is Server-Side Rendering (SSR)?

Ans: SSR renders React components on the server before sending them to the browser.

It improves:

• SEO (search engine optimization)
• Performance (faster first load)
• Accessibility for crawlers

Framework Example: Next.js supports SSR out of the box.

Ques 7: How is SSR different from Client-Side Rendering (CSR)?

Feature	SSR	CSR
Render Location	Server	Browser
SEO Friendly	Yes	No
Initial Load	Faster	Slower
Interactivity	After hydration	Immediate

Ques 8: What is Static Site Generation (SSG)?

Ans: SSG pre-renders pages at build time instead of request time.

Used in frameworks like Next.js for performance and caching benefits.

Ques 9: What is React Fiber?

Ans: React Fiber is the new reconciliation engine introduced in React 16.

It allows React to pause, abort, or resume rendering tasks — making updates smoother.

Key Benefits:

• Better rendering performance
• Enables concurrent rendering
• More predictable UI updates

Ques 10: What is Concurrent Rendering in React?

Ans: Concurrent Rendering lets React work on multiple state updates simultaneously without blocking the UI.

It ensures the app stays responsive during heavy rendering tasks. Enabled automatically in React 18 features like useTransition.

Ques 11: What is React Strict Mode?

Ans: Strict Mode is a tool for highlighting potential problems in your React code. It helps identify unsafe lifecycle methods, side effects, and deprecated APIs.

Usage:

<React.StrictMode>
  <App />
</React.StrictMode>

Ques 12: What are React Fragments and why are they used?

Ans: Fragments let you group multiple elements without adding extra DOM nodes.

Example:

<>
  <h1>Hello</h1>
  <p>World</p>
</>

Ques 13: What is Code Splitting in React?

Ans: Code Splitting splits your JavaScript bundle into smaller chunks to improve load time.

Example:

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

Ques 14: What are Higher Order Components (HOCs)?

Ans: A Higher-Order Component is a function that takes a component and returns an enhanced component.

Example:

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
}

Ques 15: What are Render Props in React?

Ans: Render Props is a pattern where a component’s child is a function that returns UI.

Example:

<Mouse render={({ x, y }) => (
  <p>The mouse position is {x}, {y}</p>
)} />

Ques 16: What is Error Boundary in React?

Ans: Error Boundaries catch JavaScript errors in child components and display fallback UI.

Example:

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    return this.props.children;
  }
}

Ques 17: What is React.memo() used for?

Ans: React.memo() is a performance optimization tool for functional components.

It prevents unnecessary re-renders if props haven’t changed.

Example:

const UserList = React.memo(function({ users }) {
  return users.map(u => <p key={u.id}>{u.name}</p>);
});

Ques 18: What is useTransition in React 18?

Ans: useTransition lets you mark some updates as non-urgent, allowing React to keep the UI responsive during heavy updates.

Example:

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setFilteredItems(filter(items));
});

Ques 19: What is useDeferredValue in React?

Ans: useDeferredValue allows React to defer updating non-critical values, improving UI responsiveness.

Example:

const deferredSearch = useDeferredValue(search);

Ques 20: What is Hydration in React SSR?

Ans: Hydration is the process of attaching React’s event listeners and internal state to server-rendered HTML. It makes static pages interactive.