Interview Q&A

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.

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.

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).

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.

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

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.

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.

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.

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:

React Fiber is a complete rewrite of React's reconciliation algorithm. It is designed to

improve the rendering performance and make React more responsive and capable of

handling asynchronous rendering.

Key Features:

• Incremental Rendering: React Fiber allows rendering to be split into chunks, so it

can pause and resume work, improving responsiveness.

• Prioritization: React can assign different priority levels to updates (e.g., user input

vs. background updates).

• Async Rendering: Enables non-blocking UI updates, making React apps feel more

responsive.

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.

Static Site Generation (SSG) is a technique where HTML pages are generated at build

time. Unlike SSR, SSG pre-renders all pages during the build process, which results in

faster load times.

Example with Next.js (SSG):

import React from 'react';

export async function getStaticProps() {

const data = await fetchDataFromAPI();
return { props: { data } };
}

function Page({ data }) {

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

export default Page;

Here, getStaticProps is a Next.js function that fetches data during build time. The page

is pre-rendered and served as static HTML.

Hydration refers to the process where React takes over the static HTML rendered by the

server and attaches event listeners and restores interactivity. This happens once the

JavaScript bundle is loaded on the client.

• SSR: Server renders the HTML.
• Hydration: React "hydrates" the server-rendered HTML to make it interactive.

This process allows the page to load quickly (thanks to the server-rendered HTML) and then

become fully interactive once React takes over.

React Ecosystem & Tools

nd developer experience.

Why use Next.js?

• Server-Side Rendering (SSR): Automatically generates HTML on the server for

better SEO and faster initial load.

• Static Site Generation (SSG): Pre-renders pages at build time, improving

performance.

• Automatic Code Splitting: Only loads the necessary JavaScript for the current

page.

• File-Based Routing: Routing is based on the file system, making navigation easier.
• API Routes: Allows you to build API endpoints directly inside your Next.js app.
• Image Optimization: Automatically optimizes images for better performance.

Example:

npx create-next-app my-next-app

In this setup, the app can be SSR or SSG-enabled, providing better performance and SEO

out of the box.