Interview Q&A

React Fiber is a complete rewrite of React's reconciliation algorithm. It is designed to

improve the rendering performance and make React more responsive and capable of

handling asynchronous rendering.

Key Features:

• Incremental Rendering: React Fiber allows rendering to be split into chunks, so it

can pause and resume work, improving responsiveness.

• Prioritization: React can assign different priority levels to updates (e.g., user input

vs. background updates).

• Async Rendering: Enables non-blocking UI updates, making React apps feel more

responsive.

Static Site Generation (SSG) is a technique where HTML pages are generated at build

time. Unlike SSR, SSG pre-renders all pages during the build process, which results in

faster load times.

Example with Next.js (SSG):

import React from 'react';

export async function getStaticProps() {

const data = await fetchDataFromAPI();
return { props: { data } };
}

function Page({ data }) {

return <div>{data}</div>;
}

export default Page;

Here, getStaticProps is a Next.js function that fetches data during build time. The page

is pre-rendered and served as static HTML.

Hydration refers to the process where React takes over the static HTML rendered by the

server and attaches event listeners and restores interactivity. This happens once the

JavaScript bundle is loaded on the client.

• SSR: Server renders the HTML.
• Hydration: React "hydrates" the server-rendered HTML to make it interactive.

This process allows the page to load quickly (thanks to the server-rendered HTML) and then

become fully interactive once React takes over.

React Ecosystem & Tools

nd developer experience.

Why use Next.js?

• Server-Side Rendering (SSR): Automatically generates HTML on the server for

better SEO and faster initial load.

• Static Site Generation (SSG): Pre-renders pages at build time, improving

performance.

• Automatic Code Splitting: Only loads the necessary JavaScript for the current

page.

• File-Based Routing: Routing is based on the file system, making navigation easier.
• API Routes: Allows you to build API endpoints directly inside your Next.js app.
• Image Optimization: Automatically optimizes images for better performance.

Example:

npx create-next-app my-next-app

In this setup, the app can be SSR or SSG-enabled, providing better performance and SEO

out of the box.

Create React App (CRA) is a boilerplate tool to set up a modern React app without

configuring build tools like Webpack, Babel, etc. It’s designed to help you focus on writing

code instead of spending time configuring tools.

Features:

• Zero Configuration: It sets up Webpack, Babel, ESLint, and other essential tools.
• Development Server: Provides a development server with hot reloading.
• Production Build: Automates production optimizations like minification, asset

optimization, etc.

How to Use CRA:

npx create-react-app my-app

cd my-app

npm start

With CRA, you don’t have to manually configure Webpack or Babel. It gives you everything

you need to start building React applications right away.

Answer: ge: PropTypes.number.isRequired, }; In this example, PropTypes.string.isRequired ensures that the name prop is a string nd is required. If it’s not passed or is of the wrong type, React will display a warning in the console.

What interviewers expect

• A clear definition tied to React in React.js projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production React.js application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in React.js architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

React Native is a framework for building native mobile applications (iOS and Android)

using React and JavaScript. While React is for web development, React Native allows you

to create mobile apps with a similar paradigm but using native components (e.g., <View>

instead of <div>).

Key Differences:

• React: Builds for the web, rendering HTML and managing DOM.
• React Native: Builds for mobile, using native components and APIs for interaction

with mobile devices (camera, geolocation, etc.).

Example in React Native:

import { Text, View } from 'react-native';

function App() {

return (

<View>

<Text>Hello, React Native!</Text>

</View>

);

}

In React Native, the components map to native UI elements, such as <Text> for text,

<View> for containers, and <Button> for buttons.

Reconciliation is the process React uses to update the UI efficiently when state or props

change. React compares the old virtual DOM with the new virtual DOM and calculates the

minimal set of changes required to update the real DOM. This makes React apps fast and

efficient.

Why important:

• It helps React determine the minimal updates needed, avoiding unnecessary

re-renders.

• React uses a diffing algorithm to compare previous and current states to optimize

DOM updates.

ngular:

• Framework: Full-fledged framework for building web apps.
• Uses TypeScript by default and has built-in solutions for routing, HTTP requests,

form handling, and more.

• Two-way data binding: Automatically synchronizes model and view.

Vue:

• Framework: Similar to React, but provides two-way binding and template syntax.
• Easier to integrate into existing projects.
• Flexibility: Offers the reactivity model and simplicity in syntax.

JSX transpilation refers to the process of converting JSX syntax (JavaScript XML) into

regular JavaScript. Since browsers don't understand JSX directly, tools like Babel transpile

JSX into valid JavaScript that browsers can execute.

Example:

const element = <h1>Hello, world!</h1>;

Babel transpiles the JSX into:

const element = React.createElement('h1', null, 'Hello, world!');

Concurrent Mode is an experimental feature in React that enables the rendering process to

be interruptible. It allows React to work on multiple tasks at once, making apps feel more

responsive by prioritizing higher-priority updates (like animations or user input) over

lower-priority ones.