Interview Q&A

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>;
}

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.

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

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: <> <h1>Title</h1> <p>Description</p> </> 🔍 Equivalent to <React.Fragment> 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: <button onClick={handleClick}>Click Me</button>

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.

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>

);

}

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>

);

}

✅ 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");

};

}, []);

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;

});

useContext lets you consume a context value without using a Context.Consumer.

✅ Example:

const ThemeContext = React.createContext("light");

function App() {

return (

<ThemeContext.Provider value="dark">

<Toolbar />

</ThemeContext.Provider>

);

}

function Toolbar() {

const theme = useContext(ThemeContext);
return <div className={`theme-${theme}`}>Theme is {theme}</div>;
}

Custom hooks are just functions that use hooks.

✅ Example:

import { useState, useEffect } from 'react';

function useWindowWidth() {

const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {

const handleResize = () => setWidth(window.innerWidth);

window.addEventListener('resize', handleResize);

return () => window.removeEventListener('resize', handleResize);

}, []);

return width;
}

// Usage

function Component() {

const width = useWindowWidth();
return <p>Window width: {width}</p>;
}

Answer: void recalculating heavy logic on every render. const filteredList = useMemo(() =&gt; { return items.filter(item =&gt; item.includes(searchTerm)); }, [items, searchTerm]);

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.

Class Component

Pitfall

Hook-Based Solution

this binding issues ✅ No this in hooks

Boilerplate code ✅ More concise with hooks

Sharing logic ✅ Custom hooks enable reuse

Complex lifecycle logic ✅ useEffect unifies side

effects

✅ Hooks lead to simpler, more readable, and reusable code.

React State Management – Redux,

Context API, and More

Answer: ✅ Create context: const ThemeContext = React.createContext(); ✅ Provide context: &lt;ThemeContext.Provider value="dark"&gt; &lt;App /&gt; &lt;/ThemeContext.Provider&gt; ✅ Consume context: const theme = useContext(ThemeContext);

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.

Middleware are functions that sit between dispatching an action and reaching the

reducer.

✅ Common uses:

• Handle async operations (API calls)
• Logging
• Error handling

✅ Examples:

• redux-thunk
• redux-saga
• redux-logger

✅ Example (redux-logger):

const logger = store => next => action => {

console.log('dispatching', action);

return next(action);

};

ctions

Generator-based side effects

Complexity Simple Advanced

Syntax Imperative (JS functions) Declarative (generators/yield)

Use case Basic async logic Complex flows, retries, delays

✅ Thunk example:

const fetchUser = () => (dispatch) => {

fetch("/api/user")

.then(res => res.json())

.then(data => dispatch({ type: "SET_USER", payload: data }));

};

Redux Toolkit (RTK) is the official, recommended way to write Redux logic.

✅ RTK Benefits:

• Less boilerplate
• Built-in createSlice, createAsyncThunk, configureStore
• Integrated DevTools
• Handles immutability under the hood

✅ Example:

const counterSlice = createSlice({

name: 'counter',

initialState: 0,

reducers: {

increment: (state) => state + 1,

},

});

export const { increment } = counterSlice.actions;

✅ Using middleware, such as:

• redux-thunk – lets you dispatch functions
• redux-saga – handles complex side effects via generators
• redux-observable – uses RxJS

✅ Example with thunk:

const fetchData = () => async (dispatch) => {

const response = await fetch('/data');
const data = await response.json();

dispatch({ type: 'SET_DATA', payload: data });

};

Selectors are functions that read and return data from the store, often with memoization.

✅ Purpose:

• Centralize access to state shape
• Avoid duplication
• Optimize performance

✅ Basic selector:

const selectUser = (state) => state.user;

✅ With reselect:

import { createSelector } from 'reselect';

const selectCartItems = (state) => state.cart.items;

const selectTotalPrice = createSelector(

[selectCartItems],

(items) => items.reduce((sum, item) => sum + item.price, 0)

);

React Routing

You can implement routing in React using React Router. Here's how:

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.