Interview Q&A

Answer: state changes frequently or if the shouldComponentUpdate method isn’t properly utilized.

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: Components are the building blocks of a React application. Each component is an isolated, reusable piece of the UI. ✅ Example: function Welcome(props) { return <h1>Hello, {props.name}</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.

Answer: JSX can create new function references on every render, causing unnecessary re-renders.

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.

Feature Class

Component

Functional

Component

Syntax ES6 Class Function

State this.state useState hook

Lifecycle methods Yes Use useEffect, etc.

Code size More verbose Cleaner and shorter

✅ Example:

Class:
class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;
}
}

Functional:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;
}

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.

React’s reconciliation algorithm compares the new Virtual DOM with the old one using a

diffing algorithm. It:

• Identifies what changed (nodes, attributes, etc.)
• Applies minimum changes to the actual DOM
• Uses keys to track list item changes efficiently

Answer: Utility-first CSS framework that uses predefined classes for layout and styling. Great for rapid development.

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: Props (short for "properties") are read-only data passed from a parent component to a child. ✅ Example: function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } <Greeting name="Alice" />

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.

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: Functional component: Use setState from useState. Class component: Use this.setState(). ✅ Example: const [name, setName] = useState("John"); setName("Doe");

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: 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: ✅ Using ternary: {isLoggedIn ? &lt;Logout /&gt; : &lt;Login /&gt;} ✅ Using short-circuit: {isVisible &amp;&amp; &lt;Sidebar /&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.

Answer: Fragments let you return multiple elements without adding an extra DOM node. ✅ Example: &lt;&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;p&gt;Description&lt;/p&gt; &lt;/&gt; 🔍 Equivalent to &lt;React.Fragment&gt; but shorter.

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: React uses camelCase syntax and passes functions directly. ✅ Example: &lt;button onClick={handleClick}&gt;Click Me&lt;/button&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.

Answer: React wraps native browser events in a SyntheticEvent object for cross-browser compatibility. ✅ Example: function handleClick(e) { console.log(e); // SyntheticEvent }

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.

Use controlled components and onChange handlers.

✅ Example:

function Form() {

const [name, setName] = useState("");

const handleSubmit = e => {

e.preventDefault();

console.log(name);

};

return (

<form onSubmit={handleSubmit}>

<input value={name} onChange={e => setName(e.target.value)} />

<button type="submit">Submit</button>

</form>

);

}

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

Answer: Hooks are functions that let you "hook into" React state and lifecycle features in functional components. Before hooks, only class components could use state and lifecycle methods. ✅ Hooks introduced in React 16.8.

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.

useState lets you add state to functional components.

✅ Syntax:

const [state, setState] = useState(initialValue);

✅ Example:

import { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);
return (

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

);

}

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

✅ componentDidMount:

useEffect(() => {

console.log("Component mounted");

}, []); // Empty array = run once on mount

✅ componentWillUnmount:

useEffect(() => {

const id = setInterval(() => console.log("tick"), 1000);
return () => {

clearInterval(id); // Cleanup

console.log("Component unmounted");

};

}, []);

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.

useRef creates a mutable reference that persists across renders.

✅ Syntax:

const ref = useRef(initialValue);

✅ Use cases:

• Accessing DOM elements
• Persisting values without causing re-renders
• Storing previous values

✅ Example (DOM access):

const inputRef = useRef();

function focusInput() {

inputRef.current.focus();

}
return <input ref={inputRef} />;

✅ Example (storing previous state):

const prevCount = useRef();

useEffect(() => {

prevCount.current = count;

});