Advance React.js interview questions and answers

1. What is Server-Side Rendering (SSR) in React?
Server-Side Rendering (SSR) is a technique where the React components are rendered on the server and the generated HTML is sent to the browser.

How SSR Works?

1. The server renders the React components into static HTML.
2. The HTML is sent to the browser.
3. The browser hydrates the HTML by attaching event listeners.

Advantages of SSR
✅ Improves SEO (Search engines can index pages faster)
✅ Faster initial page load
✅ Better for sharing links on social media (metadata is visible)

Example using Next.js (React framework for SSR)

import React from "react";

export async function getServerSideProps() {
  return { props: { message: "Hello from SSR!" } };
}

export default function SSRPage({ message }) {
  return <h1>{message}</h1>;
}

👉 getServerSideProps() runs on the server, fetches data, and passes it as props to the component.

2. How does React optimize performance?
React optimizes performance using:

1️⃣ React.memo (for Component Memoization)
Prevents re-rendering of unchanged components.

const MemoizedComponent = React.memo(({ name }) => {
  console.log("Rendering...");
  return <p>Hello, {name}</p>;
});

2️⃣ useCallback (for Function Memoization)
Prevents re-creating functions on every render.

const memoizedFunction = useCallback(() => {
  console.log("Memoized function");
}, []);

3️⃣ useMemo (for Expensive Computations)
Caches expensive calculations.

const computedValue = useMemo(() => {
  return heavyComputation(data);
}, [data]);

4️⃣ Lazy Loading & Code Splitting
Loads components only when needed using React.lazy().

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

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

3. What is React Reconciliation?
Reconciliation is React’s diffing algorithm that determines the minimum number of updates required in the real DOM.

How it Works?

1. React compares the Virtual DOM with the previous Virtual DOM snapshot.
2. It finds differences (diffing algorithm).
3. It updates only the changed parts (reconciliation) instead of re-rendering everything. Why is it Important? ✅ Reduces unnecessary re-renders ✅ Optimizes app performance

4. Explain Lazy Loading and Code Splitting in React.
Lazy loading and code splitting are techniques to improve performance by loading JavaScript files only when needed.

Example of Lazy Loading in React

import React, { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </Suspense>
  );
}

✅ Reduces initial page load time
✅ Improves performance in large applications

5. What is the difference between React.memo and PureComponent?
Feature React.memo (Function Component) PureComponent (Class Component)
Used in Functional components Class components
Prevents re-renders? Yes, if props remain unchanged Yes, if state/props remain unchanged
How? Uses shallow comparison of props Uses shouldComponentUpdate automatically
Example of React.memo

const MemoizedComponent = React.memo(({ name }) => {
  console.log("Rendering...");
  return <p>Hello, {name}</p>;
});

Example of PureComponent

import React, { PureComponent } from "react";

class MyComponent extends PureComponent {
  render() {
    console.log("Rendering...");
    return <p>Hello, {this.props.name}</p>;
  }
}

👉 Both prevent unnecessary re-renders, but React.memo is used for functional components, while PureComponent is used for class components.

6. What is Hydration in React?
Hydration is the process where React attaches event listeners to server-rendered HTML to make it interactive.

Example of Hydration in Next.js

import { useEffect } from "react";

function Page() {
  useEffect(() => {
    console.log("Hydrated!");
  }, []);

  return <h1>Hello, World!</h1>;
}
export default Page;

✅ Used in SSR and Static Site Generation (SSG)
✅ Improves initial load time

7. What is Suspense in React?
Suspense allows React to wait for async operations (e.g., API calls, lazy loading) before rendering components.

Example of Suspense with Lazy Loading

import React, { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </Suspense>
  );
}

✅ Helps in code splitting
✅ Works with data fetching in React 18

8. How do you handle errors in React applications?
1️⃣ Using Error Boundaries
React class components can catch errors using componentDidCatch().

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error:", error, info);
  }

  render() {
    return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;
  }
}

✅ Used for UI errors, but not for async errors

9. What are Concurrent Features in React?
Concurrent Mode (introduced in React 18) allows React to render multiple tasks simultaneously without blocking the UI.

Key Features
startTransition() – Makes state updates low priority
useDeferredValue() – Defers rendering large updates
useId() – Generates unique IDs for accessibility
Example of startTransition()

import { useState, startTransition } from "react";

function SearchComponent() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  function handleSearch(e) {
    setQuery(e.target.value);
    startTransition(() => {
      setResults(filterResults(e.target.value));
    });
  }

  return <input type="text" value={query} onChange={handleSearch} />;
}

✅ Improves UI responsiveness by prioritizing important updates