Interview Q&A

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.

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

shouldComponentUpdate is a lifecycle method in class components that determines

whether a component should re-render. By default, a component re-renders when state or

props change, but shouldComponentUpdate allows you to optimize this behavior.

• Return false to prevent a re-render.
• Return true (or omit the method) to allow a re-render.

Example:

class MyComponent extends React.Component {

shouldComponentUpdate(nextProps, nextState) {

// Prevent re-render if props haven't changed

return nextProps.name !== this.props.name;
}

render() {

return <div>{this.props.name}</div>;
}
}

Answer: Rendering large lists can cause performance issues if each item re-renders unnecessarily. Here are some strategies:

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.

Pure Component is a React class component that automatically implements

shouldComponentUpdate with a shallow prop and state comparison.

• Benefit: It prevents unnecessary re-renders by performing a shallow comparison of

props and state.

Example:

class MyComponent extends React.PureComponent {

render() {

return <div>{this.props.name}</div>;
}
}

Pure components are a good choice when you know that your component only depends on

props and state and you want to avoid unnecessary updates.

Virtualization is a technique where only the items that are visible in the viewport are

rendered, while the others are not rendered until they come into view. This significantly

reduces the number of DOM nodes and boosts performance when rendering large lists.

Popular libraries for virtualization in React include:

• react-window
• react-virtualized

Example with react-window:

import { FixedSizeList as List } from 'react-window';

function MyList({ items }) {

return (

<List

height={400}

itemCount={items.length}

itemSize={35}

width={300}

{({ index, style }) => (

<div style={style}>{items[index]}</div>

)}

</List>

);

}

Only the visible items will be rendered, and as the user scrolls, new items will be loaded

dynamically.

Debugging performance issues can be done using several tools and strategies:

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: You test React components by writing unit tests that simulate rendering, interaction, and lifecycle behavior. Key Steps:

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: unit test checks a small unit of functionality, such as a React component. Here’s how you can write a unit test:

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.

To test component interactions like button clicks, form submissions, or other events, you

can use fireEvent or user-event (for more realistic user interactions).

Example using fireEvent:

import { render, screen, fireEvent } from '@testing-library/react';

import MyComponent from './MyComponent';

test('button click changes text', () => {

render(<MyComponent />);

const button = screen.getByText('Click me');

fireEvent.click(button);

expect(screen.getByText('You clicked!')).toBeInTheDocument();

});

Example using user-event (better for simulating real user interactions):

npm install --save-dev @testing-library/user-event

import { render, screen } from '@testing-library/react';

import userEvent from '@testing-library/user-event';

import MyComponent from './MyComponent';

test('button click changes text', () => {

render(<MyComponent />);

const button = screen.getByText('Click me');

userEvent.click(button);

expect(screen.getByText('You clicked!')).toBeInTheDocument();

});

user-event is better because it simulates real user actions like clicks, typing, and more.

Answer: To mock API calls in tests, you can use jest.mock() to mock functions or API calls. Mocking fetch or axios: Mock fetch: global.fetch = jest.fn(() =&gt; Promise.resolve({ json: () =&gt; Promise.resolve({ data: 'mock 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: wait waitFor(() =&gt; screen.getByText('Loaded Data')); expect(screen.getByText('Loaded Data')).toBeInTheDocument(); }); In this case, waitFor() waits until the expected element appears in the DOM after an sync operation completes.

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.

Higher-Order Component (HOC) is a function that takes a component and returns a

new component with additional props or behavior.

• Purpose: HOCs are used for code reuse, logic abstraction, and enhancing

components with common functionality (e.g., authentication, data fetching, etc.).

• How it works: HOCs are like decorators that wrap a component and add extra logic

before rendering the component.

Example:

function withLoading(Component) {

return function WithLoading(props) {
if (props.isLoading) {
return <div>Loading...</div>;
}
return <Component {...props} />;

};

}
const MyComponent = ({ data }) => <div>{data}</div>;
const MyComponentWithLoading = withLoading(MyComponent);

In this example, withLoading is a higher-order component that adds loading state to

MyComponent.

Portal provides a way to render children into a different part of the DOM outside of the

parent component’s DOM hierarchy. This is particularly useful for scenarios like modals,

tooltips, or popups that need to visually break out of their parent component but still maintain

their React component state.

• When to use: When you need to render content outside the DOM hierarchy of a

parent, without losing the React component context (e.g., for modals, overlays, etc.).

Example:

import React from 'react';

import ReactDOM from 'react-dom';

function Modal() {

return ReactDOM.createPortal(

<div className="modal">This is a modal</div>,

document.getElementById('modal-root') // Renders outside the

normal DOM tree

);

}

export default Modal;

In this case, the modal is rendered inside a specific part of the DOM (modal-root) even

though it is a child of the Modal component.

n Error Boundary is a React component that catches JavaScript errors in its child

components, logs those errors, and displays a fallback UI. This prevents the entire app from

crashing when an error occurs in a part of the component tree.

Usage:

nd helps with SEO. SSR Process:

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.

Some common build tools for React are:

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: There are several ways to handle CSS in React applications, and each comes with its own pros and cons.

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: CSS-in-JS libraries allow you to write CSS styles directly inside JavaScript files, enabling better component encapsulation and dynamic styling. Popular libraries 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.

Answer: Internationalization (i18n) in React can be handled using libraries that help manage translations, time formats, and currency formatting. The most common libraries are:

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.