Interview Q&A

pplications. It helps developers create reusable UI components, manage state efficiently,

nd update the UI in a performant way.

✅ Why use React?

• Easy to break UIs into components
• Efficient updates with Virtual DOM
• Rich ecosystem (React Router, Redux, etc.)
• Backed by Facebook and a large community

Answer: function Home() { return <h1>Home Page</h1>; } function About() { return <h1>About Page</h1>; }

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.

JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript.

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

🚫 No, browsers cannot read JSX directly. JSX needs to be transpiled (e.g., using

Babel) into regular JavaScript.

The Virtual DOM is a lightweight in-memory representation of the real DOM. React

updates the Virtual DOM first and compares it with the previous version, only applying the

necessary changes to the real DOM.

✅ Benefit: Improves performance by reducing real DOM operations.

State is data that is local to a component and can change over time.

✅ Example using useState:

import { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);
return <button onClick={() => setCount(count +

1)}>{count}</button>;

}

Answer: Feature Props State Mutable? ❌ No (read-only) ✅ Yes Who sets it? Parent component Component itself Used for Passing data Handling internal data

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.

Answer: Keys help React identify which items have changed, been added, or removed. ✅ Example: {items.map(item =&gt; ( &lt;li key={item.id}&gt;{item.name}&lt;/li&gt; ))} 🛑 Avoid using array index as key unless absolutely necessary.

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.

Answer: ccess value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: &lt;input value={value} onChange={e =&gt; setValue(e.target.value)} /&gt; ✅ Uncontrolled: &lt;input ref={inputRef} /&gt;

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.

Lifting state up means moving state to the nearest common ancestor when multiple

components need to share or modify it.

✅ Example:

function Parent() {

const [value, setValue] = useState("");
return (

<>

<Input value={value} onChange={setValue} />

<Display value={value} />

</>

);

}

function Input({ value, onChange }) {

return <input value={value} onChange={e =>

onChange(e.target.value)} />;

}

function Display({ value }) {

return <p>{value}</p>;
}

React Hooks

useEffect lets you run side effects in functional components (like data fetching,

subscriptions, etc.).

✅ Syntax:

useEffect(() => {

// Side effect

return () => {

// Cleanup

};

}, [dependencies]);

✅ Common use cases:

• Fetching data
• Event listeners
• Updating DOM directly
• Subscribing to services

Feature useEffect useLayoutEffect

When it runs After paint Before paint (after DOM mutation)

Use for Async tasks, data

fetching

Measuring DOM, sync layout

Blocking paint? ❌ No ✅ Yes (can cause jank)

🔍 Use useLayoutEffect only when layout measurement or synchronously modifying

DOM is necessary.

useCallback memoizes a function to avoid unnecessary re-creations.

✅ Syntax:

const memoizedCallback = useCallback(() => {

doSomething(a, b);

}, [a, b]);

✅ Use case:

• Prevents unnecessary re-renders of child components receiving functions as props.

const handleClick = useCallback(() => {

console.log("Clicked!");

}, []);

Redux is a predictable state container for JavaScript apps, often used with React.

✅ Why use Redux?

• Centralizes app state
• Makes state predictable and traceable
• Useful in large-scale apps with deeply nested components
• Works well with middleware for async tasks (like API calls)

Local State (useState) Global State (Redux/Context)

Exists within a component Shared across multiple components

Ideal for UI-level concerns Ideal for app-wide data (e.g., auth,

theme)

Cannot be accessed by

siblings

Easily accessible across app

Answer: sync support Manual Built-in via middleware DevTools ❌ Limited ✅ Excellent support

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.

Answer: pplications (SPA). Declarative routing: Allows you to define routes using JSX. Dynamic routing: Routes can be dynamically rendered based on the state, props, or URL.

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.

web server

Useful for apps without server-side

routing (e.g., static sites)

History API

support

Uses the HTML5 history API Uses the URL's hash to manage

routing

SEO

friendliness

SEO-friendly (with server-side

configuration)

Less SEO-friendly due to # in the

URL

ctive

style

No built-in active

style

utomatically adds an active class when the route is

ctive

Use case Basic navigation For creating navigation menus with active links (e.g.,

highlighting the active link)

Example of NavLink:

import { NavLink } from 'react-router-dom';

function Navbar() {

return (

<nav>

<NavLink to="/" activeClassName="active">Home</NavLink>

<NavLink to="/about" activeClassName="active">About</NavLink>

</nav>

);

}

Answer: Code splitting is the practice of breaking up the bundle into smaller chunks so that only the required code is loaded when needed, improving initial load performance. How to Implement:

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.

Lazy loading is a design pattern where resources (like components) are loaded only when

they are needed (e.g., when they enter the viewport or the user navigates to the route).

In React, lazy loading is typically implemented using React.lazy and Suspense.

Example:

import { Suspense } from 'react';

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

function App() {

return (

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

<HeavyComponent />

</Suspense>

);

}

This ensures that the heavy component is only loaded when the app actually needs it.

Jest is a JavaScript testing framework created by Facebook, commonly used for testing

React applications. It comes with:

• Test runner: Executes test files.
• Assertions: Provides functions like expect() for asserting conditions.
• Mocks: Mocking capabilities for API calls or functions.
• Snapshots: Captures UI output at a given time.

How to use Jest with React:

Install Jest:

npm install --save-dev jest

ccessibility

Shallow rendering, component

state, and props

Testing Approach Encourages testing DOM

behavior and accessibility

Encourages testing component

internals and methods
Integration with

React

Built with React’s rendering

behavior in mind

Requires enzyme adapter for

different React versions

Recommendation More modern, encourages

better testing practices

Still used, but React Testing

Library is more popular

Key difference:

• React Testing Library focuses on testing the output of your components (UI

behavior), similar to how a user interacts with the app.

• Enzyme focuses more on testing the internal implementation (component state,

methods).

Snapshot testing is a way of testing a component’s rendered output by saving it to a

snapshot file and comparing it with future renders. This helps detect any unintended

changes in the UI.

How to write snapshot tests:

Run Jest with snapshot testing:

npm test -- --updateSnapshot

llowing more dynamic behavior and custom rendering.

• Purpose: It enables a component to expose its logic while letting its consumers

define how the output is rendered.

Example:

class MouseTracker extends React.Component {
state = { x: 0, y: 0 };

handleMouseMove = (event) => {

this.setState({

x: event.clientX,

y: event.clientY,

});

};

render() {

return (

<div onMouseMove={this.handleMouseMove}>

{this.props.render(this.state)}

</div>

);

}
}

const App = () => (

<MouseTracker render={({ x, y }) => (

<h1>The mouse position is ({x}, {y})</h1>

)} />

);

In this example, MouseTracker uses the render prop pattern to allow the parent

component to decide how to render the mouse position data.

Reconciliation is the process by which React updates the DOM efficiently when a

component's state or props change. React uses a virtual DOM to compare the new virtual

DOM tree with the previous one and determines the minimal set of changes required to

update the actual DOM.

Key Concepts:

• Virtual DOM: A lightweight representation of the real DOM.
• Diffing algorithm: React’s algorithm compares the old and new virtual DOMs to find

the differences (diffs) and apply the smallest set of changes.

Reconciliation Flow: