Interview Q&A

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.

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

}, []);

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

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: ✅ 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

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.

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.

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

To create nested routes, place a <Route /> inside another route's component.

Example:

import { BrowserRouter as Router, Route, Switch, Link } from

'react-router-dom';

function App() {

return (

<Router>

<div>

<nav>

<Link to="/about/team">Team</Link>

<Link to="/about/company">Company</Link>

</nav>

<Switch>

<Route exact path="/about" component={About} />

<Route path="/about/team" component={Team} />

<Route path="/about/company" component={Company} />

</Switch>

</div>

</Router>

);

}

function About() {

return <h2>About Page</h2>;
}

function Team() {

return <h3>Team Page</h3>;
}

function Company() {

return <h3>Company Page</h3>;
}

You can pass URL parameters (also called dynamic routes) using : in the route path.

Example:

import { BrowserRouter as Router, Route, Switch, useParams } from

'react-router-dom';

function App() {

return (

<Router>

<Switch>

<Route path="/user/:id" component={User} />

</Switch>

</Router>

);

}

function User() {

const { id } = useParams(); // Access the dynamic parameter
return <h1>User ID: {id}</h1>;
}

In the example above, visiting /user/1 will display User ID: 1.

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>

);

}

nd either redirects or renders the requested route.

Example:

import { Redirect, Route } from 'react-router-dom';

function ProtectedRoute({ component: Component, ...rest }) {

const isAuthenticated = false; // Replace with your auth logic
return (

<Route

{...rest}

render={(props) =>

isAuthenticated ? (

<Component {...props} />

) : (

<Redirect to="/login" />

}

/>

);

}

function App() {

return (

<Router>

<Switch>

<Route path="/login" component={Login} />

<ProtectedRoute path="/dashboard" component={Dashboard} />

</Switch>

</Router>

);

}

In this example, if the user is not authenticated, they will be redirected to the login page

when trying to access the /dashboard route.

You can navigate programmatically using the useHistory hook (React Router v5) or

useNavigate hook (React Router v6).

For React Router v5 (useHistory):

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

function MyComponent() {

const history = useHistory();

const goToHome = () => {

history.push('/');

};

return <button onClick={goToHome}>Go to Home</button>;
}
For React Router v6 (useNavigate):

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

function MyComponent() {

const navigate = useNavigate();

const goToHome = () => {

navigate('/');

};

return <button onClick={goToHome}>Go to Home</button>;
}

React Performance Optimization

Common causes of performance issues include:

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.memo is a higher-order component that memoizes functional components. It only

re-renders the component if its props have changed.

• Before: Every re-render, even if props haven’t changed.
• After: Prevents unnecessary re-renders when props remain the same.

const MyComponent = React.memo(function MyComponent({ name }) {

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

});

// MyComponent will only re-render if the `name` prop changes

useMemo:

useMemo is a hook that memoizes the result of an expensive function call and only

recomputes the value when one of the dependencies changes.

• Use case: Expensive calculations or operations that don’t need to be recalculated on

every render.

Example:

const expensiveValue = useMemo(() => computeExpensiveValue(a, b),

[a, b]);

// expensiveValue will only recompute when `a` or `b` changes

useCallback:

useCallback is used to memoize a function so it doesn’t get recreated on every render.

• Use case: Prevents function re-creation when passing functions down to child

components (important when using React.memo or PureComponent).

Example:

const handleClick = useCallback(() => {

// handle the click event

}, [dependencies]); // Recreate the function only when dependencies

change