Top ReactJS interview questions and answers with practical examples for beginners and experienced developers.
Top ReactJS interview questions and answers with practical examples for beginners and experienced developers.
ReactJS is a JavaScript library developed by Meta for building reusable and interactive user interfaces using components.
Applications such as Facebook, Instagram, Netflix, dashboards and admin portals are commonly built using React.
Interviewer Note: 💡 Strong candidates explain React using real production projects.
JSX is a syntax extension that allows developers to write HTML-like code inside JavaScript.
const element = (
<h1>Welcome to React</h1>
);Interviewer Note: 💡 Candidates should know JSX is converted into JavaScript.
Components are reusable building blocks of React applications. Each component manages a portion of the UI.
function UserCard() {
return (
<div>User Profile</div>
);
}Props are data passed from parent components while State is data managed inside a component.
function User({ name }) {
const [count, setCount] = useState(0);
return (
<div>
{name}
{count}
</div>
);
}Interviewer Note: 💡 Every React interview asks Props vs State.
useState is a React Hook used to manage component state inside functional components.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button
onClick={() => setCount(count + 1)}
>
{count}
</button>
);
}useEffect is a React Hook used to perform side effects such as API calls, subscriptions, timers and DOM manipulation.
import { useEffect, useState } from 'react';
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => setUsers(data));
}, []);
return (
<div>
{users.length} Users Loaded
</div>
);
}Interviewer Note: 💡 Strong candidates explain dependency arrays and cleanup functions.
Virtual DOM is a lightweight JavaScript representation of the real DOM. React compares changes and updates only affected elements.
When updating a counter from 1 to 2, React updates only the text node instead of re-rendering the entire page.
Interviewer Note: 💡 Most candidates know Virtual DOM but cannot explain reconciliation.
Keys are unique identifiers used by React to track list items efficiently during re-rendering.
function UserList() {
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'David' }
];
return (
<ul>
{users.map(user => (
<li key={user.id}>
{user.name}
</li>
))}
</ul>
);
}Interviewer Note: 💡 Strong candidates explain how keys help React's reconciliation process.
Controlled components use React state to manage form values. Uncontrolled components rely on the DOM to manage form values.
import { useState } from 'react';
function LoginForm() {
const [email, setEmail] = useState('');
return (
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
);
}import { useRef } from 'react';
function LoginForm() {
const emailRef = useRef();
const submit = () => {
console.log(emailRef.current.value);
};
return (
<>
<input ref={emailRef} />
<button onClick={submit}>
Submit
</button>
</>
);
}Interviewer Note: 💡 Most enterprise applications prefer controlled components.
React Router is a routing library that enables navigation between pages in React applications without full page reloads.
import {
BrowserRouter,
Routes,
Route
} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route
path='/'
element={<Home />}
/>
<Route
path='/users'
element={<Users />}
/>
</Routes>
</BrowserRouter>
);
}Interviewer Note: 💡 Candidates should understand client-side routing vs server-side routing.
React.memo is a Higher Order Component that prevents unnecessary re-rendering when props have not changed.
const UserCard = React.memo(
({ user }) => {
console.log('Rendered');
return (
<div>
{user.name}
</div>
);
}
);Interviewer Note: 💡 Candidates should know React.memo is not a silver bullet.
useMemo memoizes computed values and recalculates them only when dependencies change.
const total = useMemo(() => {
return orders.reduce(
(sum, item) => sum + item.amount,
0
);
}, [orders]);useCallback memoizes function references to avoid unnecessary re-renders.
const saveUser = useCallback(() => {
api.save(user);
}, [user]);Context API provides a way to share data across components without prop drilling.
const UserContext =
createContext();
function App() {
return (
<UserContext.Provider
value={user}
>
<Dashboard />
</UserContext.Provider>
);
}Interviewer Note: 💡 Candidates should understand Context API is not a replacement for Redux.
Custom Hooks allow reusable stateful logic to be shared across components.
function useWindowWidth() {
const [width, setWidth] =
useState(window.innerWidth);
useEffect(() => {
const resize = () =>
setWidth(window.innerWidth);
window.addEventListener(
'resize',
resize
);
return () =>
window.removeEventListener(
'resize',
resize
);
}, []);
return width;
}Interviewer Note: 💡 Every React developer should know how to create custom hooks.
Error Boundaries are React components that catch JavaScript errors in their child component tree and display a fallback UI instead of crashing the entire application.
class ErrorBoundary extends React.Component {
state = {
hasError: false
};
static getDerivedStateFromError() {
return {
hasError: true
};
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong</h2>;
}
return this.props.children;
}
}Code Splitting allows applications to load only required JavaScript bundles instead of downloading everything upfront.
const Dashboard = React.lazy(
() => import('./Dashboard')
);Interviewer Note: 💡 Most enterprise React applications use route-level code splitting.
Lazy Loading delays loading components until they are actually needed.
import React, {
Suspense
} from 'react';
const Users = React.lazy(
() => import('./Users')
);
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Users />
</Suspense>
);
}Redux Toolkit is the official recommended way to write Redux logic with less boilerplate code.
import {
createSlice
} from '@reduxjs/toolkit';
const userSlice = createSlice({
name: 'user',
initialState: {
name: ''
},
reducers: {
setUser(state, action) {
state.name =
action.payload;
}
}
});A Higher Order Component is a function that accepts a component and returns an enhanced component.
function withAuth(
Component
) {
return function AuthComponent(
props
) {
const isLoggedIn = true;
return isLoggedIn
? <Component {...props} />
: <p>Access Denied</p>;
};
}Interviewer Note: 💡 Modern React often prefers Hooks over HOCs, but HOCs are still asked in interviews.
Render Props is a pattern where a component shares logic by passing a function as a prop that returns JSX.
function MouseTracker({
render
}) {
const [position, setPosition] =
useState({
x: 0,
y: 0
});
return render(position);
}
<MouseTracker
render={(pos) => (
<h2>
{pos.x}, {pos.y}
</h2>
)}
/>Interviewer Note: 💡 Mostly replaced by Hooks but still important for legacy projects.
Component Composition is the practice of combining smaller reusable components to build larger features instead of using inheritance.
function Card({
children
}) {
return (
<div className='card'>
{children}
</div>
);
}
<Card>
<h2>Product</h2>
<p>
Product Description
</p>
</Card>Forms can be managed using controlled components, custom validation logic or libraries such as React Hook Form and Formik.
const [email, setEmail] =
useState('');
const submit = () => {
if (!email) {
alert('Email Required');
}
};
<input
value={email}
onChange={(e) =>
setEmail(e.target.value)
}
/>React components are commonly tested using Jest and React Testing Library.
import {
render,
screen
} from '@testing-library/react';
test(
'renders title',
() => {
render(
<h1>React</h1>
);
expect(
screen.getByText('React')
).toBeInTheDocument();
}
);React performance can be improved using memoization, lazy loading, virtualization and efficient state management.
import {
FixedSizeList
} from 'react-window';
<FixedSizeList
height={500}
itemCount={10000}
itemSize={35}
>
{Row}
</FixedSizeList>Interviewer Note: 💡 For 5+ years candidates, interviewers usually expect real-world performance tuning examples.
Reconciliation is React's process of comparing the previous Virtual DOM with the new Virtual DOM and updating only the changed parts of the real DOM.
When a counter changes from 1 to 2, React updates only the text node instead of rebuilding the entire page.
Interviewer Note: 💡 Most candidates know Virtual DOM but cannot explain reconciliation.
Fiber is React's rendering engine introduced to improve rendering, scheduling and responsiveness for large applications.
A large dashboard can continue responding to user interactions while React processes low-priority updates in the background.
Interviewer Note: 💡 Frequently asked for senior React positions.
Concurrent Rendering allows React to prepare multiple UI updates without blocking the browser's main thread.
import {
useTransition
} from 'react';
function Search() {
const [
isPending,
startTransition
] = useTransition();
const handleChange = (value) => {
startTransition(() => {
setSearch(value);
});
};
}Suspense allows React to display fallback content while waiting for components or data to load.
import {
Suspense
} from 'react';
<Suspense
fallback={<p>Loading...</p>}
>
<Dashboard />
</Suspense>Hydration is the process of attaching React event handlers to HTML generated by server-side rendering.
Next.js renders HTML on the server, sends it to the browser, then React hydrates it to make it interactive.
Interviewer Note: 💡 Senior candidates should understand hydration mismatches and debugging techniques.
React Server Components execute on the server and send rendered UI to the client without shipping unnecessary JavaScript.
Product listing pages can be rendered entirely on the server while interactive shopping cart functionality remains on the client.
| Type | Rendering Location |
|---|---|
| CSR | Browser |
| SSR | Server |
| SSG | Build Time |
Interviewer Note: 💡 Senior developers should understand SEO, caching and performance implications.
React Query is a data-fetching library that simplifies server-state management, caching and synchronization.
import {
useQuery
} from '@tanstack/react-query';
function Users() {
const {
data,
isLoading
} = useQuery({
queryKey: ['users'],
queryFn: () =>
fetch('/api/users')
.then(r => r.json())
});
}| Zustand | Redux Toolkit |
|---|---|
| Simple | Enterprise Ready |
| Minimal Boilerplate | Structured Architecture |
| Small Bundle | Advanced Tooling |
import {
create
} from 'zustand';
const useStore = create(
(set) => ({
count: 0,
increment: () =>
set((state) => ({
count: state.count + 1
}))
})
);Interviewer Note: 💡 Interviewers often ask which solution you would choose and why.
Memory leaks occur when subscriptions, timers or event listeners remain active after a component is unmounted.
useEffect(() => {
const timer = setInterval(
() => {
console.log('Running');
},
1000
);
return () => {
clearInterval(timer);
};
}, []);Interviewer Note: 💡 Production debugging experience is often revealed through this question.
Bundle size can be optimized through code splitting, lazy loading, tree shaking, dynamic imports and dependency optimization.
const AdminModule = React.lazy(
() => import('./AdminModule')
);Interviewer Note: 💡 Candidates should mention bundle analysis tools.
React automatically escapes content, but developers must still protect applications against XSS, CSRF and insecure API usage.
<div
dangerouslySetInnerHTML={{
__html: userContent
}}
></div>React follows a rendering pipeline consisting of Render Phase and Commit Phase.
Interviewer Note: 💡 This question separates senior developers from mid-level developers.
A scalable React application should have clear separation of concerns, reusable components, modular architecture and proper state management.
src/
├── components/
├── features/
├── hooks/
├── services/
├── store/
├── routes/
├── utils/
└── pages/Interviewers want to evaluate debugging skills, ownership and production experience.
A dashboard became extremely slow after loading 15,000 records. Investigation revealed unnecessary component re-renders. The issue was resolved using React.memo, virtualization and API pagination.
Interviewer Note: 💡 One of the most important senior-level questions.
A Netflix-like application requires scalable architecture, lazy loading, SSR, caching, video streaming integration, performance optimization and global CDN distribution.
Users
↓
CDN
↓
React / Next.js
↓
API Gateway
↓
Microservices
├── Movies
├── Recommendations
├── Search
└── User ProfilesInterviewer Note: 💡 Strong candidates discuss scalability, caching and user experience.
The application should support millions of users, product catalogs, inventory, orders, payments and analytics.
Frontend
├── Home
├── Products
├── Cart
├── Checkout
├── Orders
├── User Profile
Admin
├── Inventory
├── Pricing
├── Analytics
└── PromotionsMicro Frontends divide a large frontend application into independently deployable modules owned by different teams.
Host Application
├── Products Team
├── Orders Team
├── Payments Team
├── Analytics Team
Each team deploys independently.Monorepos enable code sharing, consistent tooling and easier dependency management across multiple applications.
apps/
customer-portal
admin-portal
seller-portal
packages/
ui
auth
api-client
shared-typesA design system provides reusable UI components, accessibility standards and branding consistency.
@company/ui-core
@company/ui-react
@company/theme
@company/iconsInterviewer Note: 💡 Architects should discuss governance and adoption strategy.
Different types of state should be managed using appropriate tools. Not all state belongs in Redux or Context API.
UI State
↓
useState
--------------------------------
Global Application State
↓
Redux Toolkit
--------------------------------
Server State
↓
React Query
--------------------------------
Form State
↓
React Hook FormInterviewer Note: 💡 Architects should justify why each state management solution is used.
Core Web Vitals measure user experience and directly impact SEO and business metrics.
LCP
(Largest Contentful Paint)
CLS
(Cumulative Layout Shift)
INP
(Interaction to Next Paint)Interviewer Note: 💡 Candidates should explain how improvements affect business KPIs.
Every code change should pass quality gates before reaching production.
Developer
↓
Pull Request
↓
Lint
↓
Unit Tests
↓
Build
↓
E2E Tests
↓
Security Scan
↓
Deploy
↓
MonitoringProduction monitoring should provide visibility into errors, performance issues and user behavior.
Users
↓
Frontend Application
↓
Sentry
↓
Datadog
↓
Alerting
↓
Engineering TeamInterviewer Note: 💡 Architects should discuss observability, not just error logging.
Leadership involves balancing people, process and technology while maintaining delivery quality and engineering standards.
Frontend Architect
├── Team Lead A
│ ├── 5 Developers
│ └── QA
├── Team Lead B
│ ├── 5 Developers
│ └── QA
└── Team Lead C
├── 5 Developers
└── QAInterviewer Note: 💡 Strong architects talk about team enablement, not just coding.
State updates are batched for performance optimization. If React re-rendered the component immediately on every state update, multiple state updates inside the same event handler would cause unnecessary reflows and repaints.
// React 18 batches both state updates, triggering a single re-render:
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
}, 1000);
Interviewer Note: 💡 Check if the candidate knows how to opt out of batching using flushSync() when immediate DOM updates are required.
Synthetic Events are React's wrapper around browser native events, providing a consistent API across different browsers:
event.persist() was called. This pooling was removed in React 17.Interviewer Note: 💡 Ask: 'Where are events attached in React 17+?' (Answer: They are attached to the root container node instead of the document, which helps run multiple React versions on the same page).
These hooks run side effects at different stages of browser rendering:
Interviewer Note: 💡 Warn candidates: useLayoutEffect blocks rendering, which can lead to laggy performance if it contains heavy computations.
These variables handle state preservation differently during rendering:
.current value across re-renders. Modifying .current is a side effect and **does not trigger** a component re-render.
function Counter() {
const countRef = useRef(0);
let normalCount = 0;
const increment = () => {
countRef.current++; // Value is preserved across renders, but does not trigger re-render
normalCount++; // Resets back to 0 on the next component render!
};
}
Interviewer Note: 💡 Check if the candidate knows when to use useRef (e.g. storing timer IDs, accessing DOM elements directly).
Both hooks manage component state, but are suited for different state complexities:
Interviewer Note: 💡 Ask about optimization: useReducer makes passing dispatch handlers down to children safer because dispatch is guaranteed to be stable and won't trigger re-renders.
The Compound Component pattern allows building modular UI elements that share state implicitly using **Context API**. This decouples layouts from data flow, allowing consumers to arrange sub-elements customly without passing redundant props.
const SelectContext = createContext();
function Select({ children, onChange }) {
const [value, setValue] = useState('');
return (
<SelectContext.Provider value={{ value, setValue, onChange }}>
<div className="select-box">{children}</div>
</SelectContext.Provider>
);
}
Select.Option = function Option({ value, children }) {
const { setValue, onChange } = useContext(SelectContext);
return (
<div onClick={() => { setValue(value); onChange(value); }}>{children}</div>
);
};
Interviewer Note: 💡 A clean design pattern question. Check if they use Context or React.Children.map (Context is preferred as it supports nested structures).
createPortal(child, container) renders React elements into a DOM node located outside the parent component's DOM tree.
Interviewer Note: 💡 Ask: 'Do portal events bubble?' (Answer: Yes, events still bubble up the React component tree hierarchy, regardless of their location in the DOM).
Comparing two XML trees has an O(N³) complexity, which is too slow for real-time rendering. React implements a heuristic $O(N)$ diffing algorithm based on two assumptions:
Interviewer Note: 💡 Important for performance: explains why changing keys forces components to unmount and re-mount completely.
React's Context API triggers re-renders on all components consuming a context value whenever that value changes, even if they only read a property that didn't change.
React.memo and pass read values down as props, or use global state managers (like Zustand) that support selectors to read specific state properties.Interviewer Note: 💡 Candidates should know that Context is not an optimized state management tool for high-frequency updates.
While both optimize performance via caching, they serve different scopes:
Interviewer Note: 💡 Ask about comparison functions: React.memo accepts a custom comparison function as its second argument.
React 19 introduces the use API, which can read Promises or Context values dynamically inside rendering flows:
use can be called conditionally inside if blocks and loops.use suspends the component, showing the nearest Suspense boundary fallback until the Promise resolves.
function UserProfile({ userPromise }) {
// Can resolve promises inside the rendering path!
const user = use(userPromise);
return <div>{user.name}</div>;
}
Interviewer Note: 💡 A modern React 19 check. Verify they know that 'use' still cannot be called inside nested JavaScript helper functions (only inside component rendering functions).
The React Compiler (formerly React Forget) is a build-time tool that compiles code to automate memoization.
It analyzes code structures and automatically inserts memoization checks for components, hooks, and hook dependency arrays. This removes the need to write useMemo, useCallback, and React.memo manually, reducing boilerplate.
Interviewer Note: 💡 Tests modern build tool awareness. Ask them if they still need to write key properties (Answer: Yes, keys are still required by the reconciler).
React 19 introduces **Actions** to simplify handling asynchronous state transitions (like form submissions):
pending), removing the need to pass pending states manually as props.
// useActionState signature
const [state, formAction, isPending] = useActionState(async (prevState, formData) => {
const result = await saveUser(formData.get('name'));
return result;
}, null);
Interviewer Note: 💡 Check if the candidate knows how useFormStatus requires context, meaning it must be used inside a child component rendered within the form wrapper.
Next.js provides a robust, file-based routing architecture:
[id]/page.js matches /users/123).middleware.js) that intercepts requests before they complete. Used to inspect session cookies, handle redirects, or check authentication headers.route.js).Interviewer Note: 💡 Look for experience with Next.js App Router conventions.
While both execute on the server, they solve different performance bottlenecks:
Interviewer Note: 💡 Ensure they understand that RSCs and SSR are complementary technologies, not competitors.
Both hooks defer low-priority updates to keep the main thread responsive:
const deferredQuery = useDeferredValue(query);
const list = useMemo(() => , [deferredQuery]);
Interviewer Note: 💡 Look for their understanding of how these hooks differ from standard debounce methods (which use timers instead of scheduling priorities).
useId generates unique, stable IDs across client and server renders:
Interviewer Note: 💡 A good accessibility check. Ensure they know useId is intended for linking DOM attributes (like aria-describedby) rather than generating list keys.
A Fiber node is a lightweight object containing component metadata, state, and queues. Unlike standard DOM trees, React Fiber links nodes using a singly linked list structure:
child: Points to the first child element.sibling: Points to the next sibling element.return: Points back to the parent container node (the return target).This structure allows the reconciler to pause, resume, or abort rendering passes at any node in the tree. This is the foundation of concurrent features.
Interviewer Note: 💡 A deep internal question. Evaluate their understanding of reconciliation architecture.
Concurrent rendering allows React to pause rendering passes to handle high-priority tasks (like user typing):
Interviewer Note: 💡 Verify they understand how concurrent rendering prevents input delays (jank) in heavy applications.
Hydration links server-rendered HTML with client-side React:
new Date(), browser-only window objects, or invalid nested markup like ``).useEffect checks.suppressHydrationWarning attribute.ssr: false to disable SSR for specific components.Interviewer Note: 💡 Ask about debugging: mismatch details appear in the console, listing differences in HTML attributes and content.
React Server Components (RSC) cannot contain client interactivity (like state or event handlers). To add interactivity, you must define client boundaries using the "use client" directive.
Interviewer Note: 💡 Check if they understand how Client Components can accept Server Components as children props to render static structures.
While React escapes values rendered in JSX, CSS values passed to inline styles or dynamic CSS declarations are not escaped:
background: url(...)), attackers can inject malicious URLs or script targets.Interviewer Note: 💡 A security-focused question. Check if they know about Content Security Policy (CSP) configurations.
TanStack Query manages server state caching using specific configurations:
queryClient.invalidateQueries() marks cached queries as stale, causing them to refetch in the background.Interviewer Note: 💡 Ensure they understand the difference between staleTime and gcTime (data can be stale but still present in the cache).
Testing asynchronous behaviors requires waiting for elements to resolve using queries like findBy and utility methods like waitFor:
test('loads and displays users', async () => {
render(<UserList />);
// findBy returns a Promise resolving when the element appears
const items = await screen.findAllByRole('listitem');
expect(items).toHaveLength(2);
});
Interviewer Note: 💡 Look for their use of userEvent instead of fireEvent, which mimics real browser interactions more accurately.
These represent different architectural models for managing global state:
Interviewer Note: 💡 Ask the candidate how they choose between these libraries for a large project.
An accessible Modal component must meet WAI-ARIA standards:
role="dialog", aria-modal="true", and link titles using aria-labelledby.Escape key.Interviewer Note: 💡 A great accessibility check. Ask about libraries that simplify this (like Radix UI Dialog).
Webpack Module Federation allows an application to load compiled JavaScript bundles from other builds dynamically at runtime:
remoteEntry.js) dynamically.Interviewer Note: 💡 Look for experience with micro-frontends and dependency sharing configurations.
Server Actions are asynchronous functions executed on the server, declared using the "use server" directive. They can be invoked directly from Client or Server Components.
revalidatePath() or revalidateTag().Interviewer Note: 💡 Ask about security: Server Actions compile to POST endpoints, which means they are susceptible to CSRF attacks if not secured.
Both are popular E2E testing tools, but use different architectures:
Interviewer Note: 💡 Look for experience with setting up testing environments in CI/CD pipelines.
Declaring inline functions (e.g. onClick={() => doSomething()}) or object literals (e.g. style={{ margin: 0 }}) creates new object instances in memory on every render.
React.memo. Because inline functions and objects have new references on every render, the shallow equality checks in React.memo fail, forcing the child component to re-render.Interviewer Note: 💡 Check if they know when this behavior is safe (e.g., passing inline events to native HTML elements, where reference checks don't affect performance).
A Micro-Frontend shell application coordinates loading independent application modules dynamically:
Interviewer Note: 💡 Look for their use of shared dependencies configurations to prevent duplicate React runtime instances from loading.
A design system requires decoupling component logic from styling:
asChild patterns) to allow consumers to customize the rendered DOM elements easily.Interviewer Note: 💡 Ask about package versioning strategies (e.g., using monorepos with Lerna or Changesets to release updates).
An offline-first architecture uses service workers and local storage to handle network changes:
Interviewer Note: 💡 Ask about browser storage limits and how to handle quota errors on mobile platforms.
A monitoring SDK captures application crashes and user actions without degrading page performance:
navigator.sendBeacon() to prevent blocking page transitions.Interviewer Note: 💡 Verify they understand the difference between beforeunload and visibilitychange events when sending final telemetry logs.
A theme engine should toggle brand properties dynamically without triggering full component re-renders:
--color-primary) on the document root.Interviewer Note: 💡 Verify they know to apply theme selections during initial HTML loading to prevent flash-of-unstyled-content (FOUC) flashes.
Secure authentication requires separating tokens to prevent script access and XSS theft:
Interviewer Note: 💡 Look for their handling of multiple concurrent 401 requests (queuing requests to prevent triggering multiple refresh token requests simultaneously).
Rendering 10,000 updates per second synchronously will block the main thread and freeze the UI. To prevent this:
Interviewer Note: 💡 Check if they suggest Canvas rendering or virtualization libraries to optimize the list rendering performance.
SOLID principles help build decoupled, maintainable React components:
Interviewer Note: 💡 Evaluate if the candidate prefers component composition over nested class inheritance structures.
State updates are scheduled and batched. Inside the event handler, the count variable retains its initial closure value (e.g. 0) during execution.
The Trap: Calling setCount(count + 1) multiple times translates to setCount(0 + 1), which repeatedly schedules updates to 1. The component re-renders once with a count of 1.
Fix: Pass an updater function that receives the latest state: setCount(prev => prev + 1).
Interviewer Note: 💡 A classic state closure trap. Verify they understand how updater functions resolve state dependencies.
A stale closure occurs when a function inside useEffect references state variables from its creation scope, but does not list them in the hook's dependency array.
Because the dependency array is empty, the hook is not re-evaluated, keeping variables stuck at their initial values.
Resolution: Include referenced state variables in the dependency array, or use updater functions to read the latest state without creating dependencies.
// Stale closure: logs 0 on every tick because count is missing in dependencies
useEffect(() => {
const interval = setInterval(() => {
console.log(count);
}, 1000);
return () => clearInterval(interval);
}, []); // Missing count dependency!
Interviewer Note: 💡 Excellent React hooks question. Ask how they use refs to store values without updating dependency arrays.
React performs shallow equality checks (using Object.is) to determine if dependencies have changed.
Because arrays and objects are reference types, declaring them inline (e.g. [] or {}) inside a component creates a new reference in memory on every render.
Since the references are always different, useEffect executes on every render, triggering state updates that force a new render, creating an infinite loop.
Fixes: Memoize the object using useMemo, split properties into primitive dependencies, or compare values manually using a custom comparison ref.
Interviewer Note: 💡 Tests candidate's understanding of reference equality checks in React hooks.
The eslint-plugin-react-hooks rule flags any variables referenced inside useEffect that are missing from the dependency array.
If these variables change, the hook will not execute, leading to stale data bugs. Following the linter is required to prevent synchronization errors between states and effects.
Interviewer Note: 💡 Look for their compliance with the React 'Rules of Hooks' linting guidelines.
Using random values (like Math.random()) as keys causes React's diffing algorithm to treat the component as a brand-new element on every render.
As a result, React unmounts the old component and mounts a new one, destroying its DOM state and causing input fields to lose focus immediately on typing.
Interviewer Note: 💡 A classic rendering bug. Candidates must explain that stable keys are required to preserve input focus.
In Development mode, React's StrictMode mounts and unmounts components twice to identify side effects:
Interviewer Note: 💡 Ensure they know this double-mounting behavior is completely disabled in Production builds.
Users report that checking out crashes the entire e-commerce page, showing a blank screen instead of an error message.
The checkout API request failed with a network error. The promise rejection was not caught inside the action call, throwing a runtime error that crashed the rendering tree because there was no Error Boundary to capture it.
try/catch block to handle errors gracefully.Interviewer Note: 💡 Evaluate their strategy to handle runtime errors without crashing the main application UI.
Users typing in an autocomplete search input report that the final results shown sometimes match older queries they typed earlier.
API requests resolve at different times depending on server load and network latency.
If an earlier request (e.g. search for 'a') takes longer to respond than a later request (e.g. search for 'ab'), the first request resolves last, overwriting the UI with outdated results.
AbortController before sending new ones.Interviewer Note: 💡 A common async bug. Verify they suggest request cancellation patterns rather than just debouncing inputs.
A monitoring dashboard crashes the browser tab after users repeatedly open and close a modal containing real-time charts.
The chart component inside the modal subscribed to a global window event listener during initialization, but did not remove the listener when unmounting. The component instances remained in memory, causing usage to grow on every modal open until the browser crashed.
useEffect to remove listeners: window.removeEventListener(...).Interviewer Note: 💡 Look for experience with locating memory leaks using Chrome DevTools Heap snapshots.
Users clicking on dashboard links get a blank screen, with console logs showing ChunkLoadError: Loading chunk failed.
The application was updated and redeployed, replacing old compiled chunks on the server. Active users with cached pages tried to lazy-load routes that referenced the old, deleted chunks, crashing the app.
ChunkLoadError and triggers a page reload to fetch the new bundles automatically.Interviewer Note: 💡 A common single-page application issue. Check if they have implemented fallback strategies for deployment updates.
An application security review identified that session tokens could be extracted from the Redux store by malicious browser extensions.
The application stored sensitive JWT access tokens in the global Redux store, making them accessible to any script running on the page.
Interviewer Note: 💡 Tests application security awareness. Candidates should explain token isolation principles.
A page freezes immediately on loading, making the browser tab completely unresponsive.
The component executed a state setter function (e.g. setCount) directly in its rendering path rather than wrapping it in an event handler or useEffect. This triggers a re-render on every render pass, creating an infinite rendering loop.
useEffect hooks or event handlers (like onClick).Interviewer Note: 💡 A common beginner-to-intermediate bug. Ensure they understand React's rendering loop rules.
Common React interview questions include React fundamentals, JSX, Virtual DOM, Props vs State, Hooks, Context API, Redux Toolkit, React Performance Optimization, Server Components, SSR, and React Architecture.
Focus on React fundamentals, Hooks, state management, component design, performance optimization, debugging, and practical project experience. Senior candidates should also prepare for architecture and system design discussions.
Interviewers commonly ask about JSX, Components, Props, State, Hooks, React Router, Context API, Forms, Redux Toolkit, Error Boundaries, and Performance Optimization.
Senior React interviews typically cover Reconciliation, Fiber Architecture, Concurrent Rendering, SSR, CSR, Hydration, React Query, State Management Strategies, Performance Tuning, and Production Debugging.
React is a UI library focused on building component-based interfaces, while Angular is a complete frontend framework that includes routing, dependency injection, forms, and many built-in features.