React Interview Questions and Answers

React Fiber is the new reconciliation engine in React, introduced in React 16. It’s a complete rewrite of React’s core algorithm(old stack-based algorithm) for rendering and updating the UI. Fiber enhances React’s ability to handle asynchronous rendering, prioritized updates(assign priority to different types of updates), and interruption(ability to pause, abort, or reuse work) of rendering work, enabling smoother and more responsive user interfaces.

The goal of _React Fiber_ is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Its main goals are:

• Incremental Rendering – Breaks work into chunks for smoother updates.
• Interruptible Rendering – Pauses and resumes rendering to keep the UI responsive.
• Prioritization – Handles high-priority updates (e.g. animations) before low-priority ones.
• Concurrency Support – Enables working on multiple UI versions simultaneously.
• Better Error Handling – Supports component-level error boundaries.
• Suspense Support – Allows waiting for async data before rendering.
• Improved DevTools – Enables better debugging and performance tracking.

Concurrent rendering in React 18 lets React prepare UI updates in a non-blocking way. This means React can pause low-priority rendering work, handle urgent updates first (like typing or clicking), and then continue rendering.

#### Example: Search input stays responsive while filtering a large list

     import { useMemo, useState, useTransition } from "react";

     const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

     export default function SearchList() {
       const [query, setQuery] = useState("");
       const [filter, setFilter] = useState("");
       const [isPending, startTransition] = useTransition();

       function handleChange(e) {
         const value = e.target.value;
         setQuery(value); // urgent: keep input in sync

         // non-urgent: expensive list filtering can be interrupted
         startTransition(() => {
           setFilter(value);
         });
       }

       const filteredItems = useMemo(
         () => items.filter((item) => item.toLowerCase().includes(filter.toLowerCase())),
         [filter]
       );

       return (
         <div>
           <input value={query} onChange={handleChange} placeholder="Type to filter" />
           {isPending && <p>Updating results...</p>}
           <ul>
             {filteredItems.slice(0, 200).map((item) => (
               <li key={item}>{item}</li>
             ))}
           </ul>
         </div>
       );
     }
     

In this example, typing remains smooth because React prioritizes updating the input first, while list filtering is treated as interruptible background work.

Both refers the same thing. Previously concurrent Mode being referred to as "Async Mode" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance. These components allow us to load components from the backend.

Note: React Server Components is still under development and not recommended for production yet.

You can efficiently build nextjs application if you are aware about which part of the application needs to use client components and which other parts needs to use server components. The common cases of both client and server components are listed below:

Client components:

1. Whenever your need to add interactivity and event listeners such as onClick(), onChange(), etc to the pages
2. If you need to use State and Lifecycle Effects like useState(), useReducer(), useEffect() etc.
3. If there is a requirement to use browser-only APIs.
4. If you need to implement custom hooks that depend on state, effects, or browser-only APIs.
5. There are React Class components in the pages.

Server components:

1. If the component logic is about data fetching.
2. If you need to access backend resources directly.
3. When you need to keep sensitive information((access tokens, API keys, etc) ) on the server.
4. If you want reduce client-side JavaScript and placing large dependencies on the server.

React Fiber is the core engine that enables advanced features like concurrent rendering, prioritization, and interruptibility in React. Here's how it works:

### 1. Fiber Tree Structure

Each component in your app is represented by a Fiber node in a tree structure. A Fiber node contains:

• Component type
• Props & state
• Pointers to parent, child, and sibling nodes
• Effect tags to track changes (e.g., update, placement)
• This forms the Fiber Tree, a data structure React uses instead of the traditional call stack.

### 2. Two Phases of Rendering

#### A. Render Phase (work-in-progress)

• React builds a work-in-progress Fiber tree.
• It walks through each component (begin phase), calculates what needs to change, and collects side effects (complete phase).
• This phase is interruptible—React can pause it and resume later.

#### B. Commit Phase

• React applies changes to the Real DOM.
• Runs lifecycle methods (e.g., componentDidMount, useEffect).
• This phase is non-interruptible but fast.

### 3. Work Units and Scheduling

• React breaks rendering into units of work (small tasks).
• These units are scheduled based on priority using the React Scheduler.
• If time runs out (e.g., user starts typing), React can pause and yield control back to the browser.

### 4. Double Buffering with Two Trees

• React maintains two trees:
• Current Tree – what's visible on the screen.
• Work-In-Progress Tree – the next version being built in memory.
• Only after the new tree is fully ready, React commits it, making it the new current tree.

### 5. Concurrency and Prioritization

• React can prepare multiple versions of UI at once (e.g., during slow data loading).
• Updates can be assigned priorities, so urgent updates (like clicks) are handled faster than background work.

The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there's something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

   // 1. Part of an app by wrapping with ConcurrentMode
   <React.unstable_ConcurrentMode>
     <Something />
   </React.unstable_ConcurrentMode>;

   // 2. Whole app using createRoot
   ReactDOM.unstable_createRoot(domNode).render(<App />);