100 Most Frequently Asked React Interview Questions & Answers

Below is a practical React interview guide, progressing from fundamentals to advanced topics, performance, architecture, testing, and React 19-era concepts.

1. React Fundamentals

1. What is React?

Answer:
React is a JavaScript library for building user interfaces, especially component-based web applications. It was created by Meta and uses a declarative programming model where developers describe what the UI should look like based on application state.

2. What are the main features of React?

Answer:

• Component-based architecture
• Declarative UI
• Virtual DOM
• Unidirectional data flow
• Reusable components
• Hooks
• Server-side rendering support
• Concurrent rendering capabilities
• Large ecosystem

3. What is JSX?

Answer:
JSX is a syntax extension for JavaScript that allows developers to write HTML-like markup inside JavaScript.

JavaScript

const element = <h1>Hello, React!</h1>;

JSX is transformed into JavaScript during the build process.

4. Is JSX mandatory in React?

Answer:
No. React can be used without JSX, but JSX makes component code much easier to read and maintain.

Without JSX:

JavaScript

React.createElement("h1", null, "Hello");

With JSX:

JavaScript

<h1>Hello</h1>

5. What is a React component?

Answer:
A component is a reusable piece of UI that encapsulates rendering logic and behavior.

Modern React primarily uses function components:

function Welcome() {
  return <h1>Hello</h1>;
}

6. What is the difference between functional and class components?

Answer:

Modern React development generally favors function components and Hooks.

7. What are props?

Answer:
Props are read-only values passed from a parent component to a child component.

function User({ name }) {
  return <h2>{name}</h2>;
}

<User name="Bill" />

Props allow components to be configured and reused.

8. Can a child modify its props?

Answer:
No. Props are read-only from the child’s perspective.

If a child needs to influence parent state, the parent can pass a callback:

function Parent() {
  const [name, setName] = useState("");

  return <Child onChange={setName} />;
}

9. What is state in React?

Answer:
State is data managed by a component that can change over time and trigger a re-render.

JavaScript

const [count, setCount] = useState(0);

10. Props vs state?

Answer:

2. Virtual DOM and Rendering

11. What is the Virtual DOM?

Answer:
The Virtual DOM is an in-memory representation of the UI. React uses it to determine what changes are necessary before updating the browser’s actual DOM.

The goal is to minimize unnecessary DOM operations.

12. How does React update the DOM?

Answer:
A simplified process is:

State/Props change
       ↓
React renders component
       ↓
New React tree
       ↓
Reconciliation
       ↓
Commit changes
       ↓
Browser DOM updated

React determines which DOM changes are necessary rather than rebuilding the entire DOM.

13. What is reconciliation?

Answer:
Reconciliation is React’s process of comparing the previous rendered tree with the new rendered tree and determining the minimal set of changes needed.

14. What is the React Fiber architecture?

Answer:
Fiber is React’s internal architecture for representing and scheduling rendering work.

It enables React to:

• Break rendering work into units
• Prioritize updates
• Pause and resume work
• Support concurrent rendering
• Improve responsiveness

15. What causes a React component to re-render?

Answer:
Common causes include:

• State updates
• Parent re-rendering
• Context value changes
• Changes to external store subscriptions
• Updates triggered by Hooks

A re-render does not necessarily mean the DOM will change.

16. Does changing a normal JavaScript variable trigger a render?

Answer:
No.

let count = 0;

count++;

React doesn’t know that the variable changed.

Use state instead:

JavaScript

const [count, setCount] = useState(0);

17. What is declarative programming in React?

Answer:
Instead of explicitly telling the browser how to manipulate the DOM, you describe the desired UI state.

JavaScript

return <button>{loggedIn ? "Logout" : "Login"}</button>;

React handles the DOM updates.

3. Hooks

18. What are React Hooks?

Answer:
Hooks are functions that allow function components to use React features such as state, context, refs, and effects.

Examples:

useState()
useEffect()
useContext()
useReducer()
useMemo()
useCallback()
useRef()

19. What is useState?

Answer:
useState allows a function component to maintain state.

const [count, setCount] = useState(0);

setCount(count + 1);

20. Why shouldn’t you modify state directly?

Incorrect:

JavaScript

user.name = "John";

Correct:

setUser({
  ...user,
  name: "John"
});

React relies on state updates and identity changes to determine when components need to update.

21. What is functional state updating?

Answer:
When the next state depends on the previous state, use the updater function:

JavaScript

setCount(prev => prev + 1);

This is especially important when multiple updates may be batched.

22. What is useEffect?

Answer:
useEffect lets a component synchronize with external systems after rendering.

Examples include:

• Network connections
• Browser APIs
• Event subscriptions
• Timers
• External libraries

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

23. What is the dependency array in useEffect?

useEffect(() => {
  // effect
}, [userId]);

The effect re-runs when a dependency changes.

An empty dependency array:

useEffect(() => {
  // effect
}, []);

means the effect doesn’t re-run due to changes in reactive dependencies.

24. What does the cleanup function in useEffect do?

Answer:
Cleanup releases resources created by an effect.

useEffect(() => {
  const handler = () => console.log("resize");

  window.addEventListener("resize", handler);

  return () => {
    window.removeEventListener("resize", handler);
  };
}, []);

25. What is useRef?

Answer:
useRef stores a mutable value that persists across renders without causing a re-render when changed.

const inputRef = useRef(null);

inputRef.current?.focus();

It is commonly used for DOM references and instance-like values.

26. useRef vs useState?

Answer:

27. What is useMemo?

Answer:
useMemo caches the result of a calculation between renders when its dependencies haven’t changed.

const filteredUsers = useMemo(
  () => users.filter(u => u.active),
  [users]
);

It should be used when the calculation or resulting identity matters enough to justify memoization.

28. What is useCallback?

Answer:
useCallback caches a function reference between renders.

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

It’s useful when function identity affects memoized children or Hook dependencies.

29. useMemo vs useCallback?

Answer:

useMemo     → memoizes a calculated value
useCallback → memoizes a function

Example:

const value = useMemo(() => calculate(), [data]);

const handler = useCallback(() => doSomething(), [data]);

30. What is useReducer?

Answer:
useReducer manages state using a reducer function.

const [state, dispatch] = useReducer(reducer, initialState);

dispatch({ type: "ADD_ITEM" });

It’s useful when state transitions are complex or related.

31. useState vs useReducer?

Answer:
Use useState for relatively simple local state.

Use useReducer when:

• State transitions are complex
• Multiple values change together
• State logic should be centralized
• Actions provide clearer semantics

32. What is useContext?

Answer:
useContext reads a value from a React Context.

JavaScript

const theme = useContext(ThemeContext);

It avoids manually passing the same prop through many intermediate components.

33. What are custom Hooks?

Answer:
Custom Hooks are reusable functions whose names begin with use and which can call other Hooks.

function useOnlineStatus() {
  const [online, setOnline] = useState(true);

  // subscription logic

  return online;
}

They allow reusable stateful logic without duplicating component code.

34. What are the Rules of Hooks?

Answer:

1. Call Hooks only at the top level.
2. Don’t call Hooks inside loops or conditions.
3. Call Hooks only from React function components or custom Hooks.

Incorrect:

if (loggedIn) {
  useEffect(...);
}

35. Why can’t Hooks be called conditionally?

Answer:
React relies on a consistent Hook call order between renders. Conditional calls can change that order and cause React to associate state with the wrong Hook.

4. Components and Data Flow

36. What is component composition?

Answer:
Composition means building complex components by combining smaller components.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

Usage:

<Card>
  <UserProfile />
</Card>

37. What is children in React?

Answer:
children is a special prop containing content nested inside a component.

function Panel({ children }) {
  return <section>{children}</section>;
}

38. What is prop drilling?

Answer:
Prop drilling occurs when data is passed through several intermediate components that don’t actually need the data.

Parent
  ↓
Component A
  ↓
Component B
  ↓
Component C

Context or state-management solutions can sometimes reduce this.

39. What is lifting state up?

Answer:
Lifting state up means moving shared state to the closest common ancestor of components that need it.

       Parent
      /      \
 Child A    Child B

The parent owns the shared state.

40. What is one-way data flow?

Answer:
React generally follows:

Parent
  ↓
Props
  ↓
Child

Data flows downward. Child components can request changes by invoking callbacks supplied by parents.

41. What is controlled input?

Answer:
A controlled input gets its value from React state.

const [name, setName] = useState("");

<input
  value={name}
  onChange={e => setName(e.target.value)}
/>

42. What is an uncontrolled input?

Answer:
An uncontrolled input stores its current value in the DOM rather than React state.

const inputRef = useRef();

<input ref={inputRef} />

43. Controlled vs uncontrolled components?

Answer:

5. Lists and Keys

44. Why does React require keys when rendering lists?

Answer:
Keys help React identify which items have changed, been added, or removed.

users.map(user => (
  <User key={user.id} user={user} />
))

45. Why is using array index as a key problematic?

Answer:
If list items can be inserted, removed, or reordered, indexes can change and cause React to associate component state with the wrong item.

Stable IDs are preferable.

46. Can two lists use the same key?

Answer:
Keys only need to be unique among siblings in the same rendered list context. They don’t need to be globally unique.

6. Event Handling

47. How are events handled in React?

<button onClick={handleClick}>
  Click
</button>

React uses event handlers as functions rather than string-based HTML handlers.

48. What is event propagation?

Answer:
Events generally propagate through phases:

Capture
   ↓
Target
   ↓
Bubble

React event handlers normally observe bubbling behavior.

49. How do you prevent event propagation?

function handleClick(e) {
  e.stopPropagation();
}

50. How do you prevent default browser behavior?

function handleSubmit(e) {
  e.preventDefault();
}

7. Context and State Management

51. What is React Context?

Answer:
Context provides a mechanism for making data available to components without explicitly passing props through every intermediate component.

Typical examples:

• Theme
• Locale
• Authentication information
• Dependency-like application configuration

52. Is Context a replacement for Redux?

Answer:
Not necessarily.

Context solves data distribution.

Redux and other state-management libraries can provide:

• Structured state updates
• Middleware
• DevTools
• Predictable state transitions
• Selective subscriptions
• Large-scale application patterns

53. What is Redux?

Answer:
Redux is a predictable state-management library based around centralized state, actions, reducers, and a store.

Modern Redux development generally uses Redux Toolkit rather than writing Redux boilerplate manually.

54. What is Redux Toolkit?

Answer:
Redux Toolkit is the recommended way to write Redux applications. It provides utilities such as:

configureStore()
createSlice()
createAsyncThunk()

It significantly reduces boilerplate.

55. What is a reducer?

Answer:
A reducer is a function that determines the next state from the current state and an action.

Conceptually:

JavaScript

nextState = reducer(currentState, action);

8. Routing

56. What is client-side routing?

Answer:
Client-side routing changes the displayed application view without requiring a full browser page reload.

A common React ecosystem solution is React Router.

57. What is the difference between SPA and traditional multi-page applications?

Answer:

SPA:

• One main document
• Client-side navigation
• Dynamic rendering
• Usually smoother navigation

MPA:

• Multiple server-delivered pages
• Navigation often causes document requests
• Server commonly renders each page

58. What is lazy loading in React?

Answer:
Lazy loading loads a component only when it is needed.

JavaScript

const Dashboard = lazy(() => import("./Dashboard"));

Combined with:

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

59. What is Suspense?

Answer:
Suspense lets React display fallback UI while part of the component tree is waiting for something that supports Suspense.

A common example is lazy-loaded code:

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

9. Performance

60. How do you optimize React application performance?

Answer:

Common techniques include:

• Avoid unnecessary renders
• Split large components
• Use appropriate memoization
• Lazy-load routes/components
• Virtualize large lists
• Optimize images
• Reduce JavaScript bundle size
• Keep state close to where it is needed
• Avoid unnecessary effects
• Profile before optimizing

61. What is React.memo?

Answer:
React.memo can skip re-rendering a component when its props are unchanged according to its comparison.

const User = React.memo(function User({ name }) {
  return <div>{name}</div>;
});

It is an optimization, not a guarantee that a component will never render.

62. When should you use React.memo?

Answer:
Use it when profiling shows that a component frequently re-renders with the same props and skipping those renders provides meaningful benefit.

Don’t automatically wrap every component in React.memo.

63. Why can React.memo fail to prevent re-rendering?

Consider:

JavaScript

<Child data={{ name: "Bill" }} />

A new object is created every render.

Therefore the prop reference changes.

Memoization may work better with stable references when appropriate.

64. What is code splitting?

Answer:
Code splitting divides the JavaScript bundle into smaller chunks that can be loaded when needed.

JavaScript

const Admin = lazy(() => import("./Admin"));

This can improve initial load performance.

65. What is list virtualization?

Answer:
Virtualization renders only the visible portion of a large list rather than thousands of DOM elements simultaneously.

It’s useful for:

• Large tables
• Logs
• Search results
• Chat histories

66. What is React Profiler?

Answer:
React Profiler helps identify rendering performance problems by measuring component rendering and commit behavior.

It can be used through React DevTools and programmatically through the Profiler API.

67. Why should you avoid unnecessary useEffect?

Answer:
Effects are designed for synchronization with external systems. Using them for ordinary derived calculations can introduce:

• Extra renders
• Synchronization bugs
• More complicated logic

For example, instead of:

const [fullName, setFullName] = useState("");

useEffect(() => {
  setFullName(first + " " + last);
}, [first, last]);

prefer deriving it directly:

JavaScript

const fullName = first + " " + last;

10. React 18+ and Modern React

68. What is concurrent rendering?

Answer:
Concurrent rendering allows React to work on rendering tasks in a way that can prioritize more urgent updates and keep the interface responsive.

It is an internal capability that enables modern React features such as transitions.

69. What is automatic batching?

Answer:
Modern React can batch multiple state updates together, reducing unnecessary rendering work.

setCount(c => c + 1);
setName("Bill");

These updates can be processed together.

70. What is useTransition?

Answer:
useTransition marks updates as non-urgent transitions.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(value);
});

This can help keep urgent interactions responsive while React works on less urgent UI updates.

71. What is useDeferredValue?

Answer:
useDeferredValue lets part of the UI use a deferred version of a value.

JavaScript

const deferredQuery = useDeferredValue(query);

It can be useful when rendering based on a value is expensive.

72. useTransition vs useDeferredValue?

Answer:

useTransition:

You control the state update
        ↓
mark it as non-urgent

useDeferredValue:

You already have a value
        ↓
use a deferred version of it

73. What is useId?

Answer:
useId generates stable IDs suitable for associating related DOM elements, especially in server-rendered applications.

const id = useId();

<label htmlFor={id}>Email</label>
<input id={id} />

It should not be used as a list key.

74. What is useSyncExternalStore?

Answer:
useSyncExternalStore is a Hook designed for subscribing to external stores in a way compatible with React’s rendering model.

It’s useful for libraries that integrate external state with React.

75. What is useInsertionEffect?

Answer:
useInsertionEffect is primarily intended for CSS-in-JS libraries that need to insert styles before layout effects run.

Application developers rarely need it directly.

11. React 19 Concepts

76. What are React Actions?

Answer:
React Actions provide a model for handling asynchronous operations associated with UI state transitions, particularly forms and mutations.

They simplify common patterns involving:

• Pending state
• Errors
• Form submissions
• Optimistic updates

77. What is useActionState?

Answer:
useActionState allows a component to manage state resulting from an Action.

Conceptually:

const [state, formAction, isPending] =
  useActionState(action, initialState);

It is particularly useful for form submissions and asynchronous mutations.

78. What is useOptimistic?

Answer:
useOptimistic allows the UI to immediately display an expected result while an asynchronous operation is being processed.

For example:

User sends comment
       ↓
Show comment immediately
       ↓
Send request
       ↓
Success → keep it
Failure → reconcile/revert

79. What is the React use API?

Answer:
The use API can read certain resources, including Promises and context, within React’s rendering model.

Conceptually:

JavaScript

const data = use(dataPromise);

When the resource isn’t ready, React can coordinate with Suspense.

80. What is the React Compiler?

Answer:
React Compiler is a build-time optimization system designed to automatically optimize React code based on its understanding of component dependencies and reactivity.

It can reduce the need for manually applying memoization in many cases.

12. Server-Side Rendering

81. What is SSR?

Answer:
Server-Side Rendering means rendering HTML on the server and sending it to the browser.

Benefits can include:

• Faster initial content
• SEO advantages
• Better performance on slower devices/networks

82. CSR vs SSR?

Answer:

83. What is hydration?

Answer:
Hydration is the process where React attaches client-side behavior to HTML that was already rendered on the server.

Server
 ↓
HTML
 ↓
Browser
 ↓
React hydration
 ↓
Interactive application

84. What is hydration mismatch?

Answer:
A hydration mismatch occurs when the HTML generated on the server differs from what React expects to render on the client.

Common causes include:

new Date()
Math.random()
window

when used inconsistently between server and client.

85. What are React Server Components?

Answer:
React Server Components allow certain components to execute on the server and send their rendered result or component payload to the client without requiring all of their implementation to become client-side JavaScript.

They can reduce client bundle size and simplify server-side data access.

86. Server Components vs SSR?

Answer:
They are different concepts.

SSR:

Where and when HTML is rendered.

Server Components:

Where component logic executes and which code needs to reach the client.

They can be used together.

13. Error Handling

87. What is an Error Boundary?

Answer:
An Error Boundary catches rendering errors in descendant components and displays fallback UI instead of allowing the entire application UI to crash.

Conceptually:

Error Boundary
      ↓
  Component
      ↓
   Error
      ↓
Fallback UI

Traditional Error Boundaries use class-based APIs, although modern React application frameworks may provide higher-level error handling mechanisms.

88. Can Error Boundaries catch errors in event handlers?

Answer:
No. Error boundaries traditionally handle errors during rendering and related lifecycle processing, not ordinary event-handler errors.

Event handlers should handle their own errors.

89. How should API errors be handled in React?

Answer:
A robust application usually models:

Loading
Success
Empty
Error

For example:

if (loading) return <Spinner />;
if (error) return <ErrorMessage />;
if (!data.length) return <EmptyState />;

return <Results data={data} />;

For larger applications, dedicated data-fetching libraries can provide caching, retries, invalidation, and synchronization.

14. Testing

90. How do you test React components?

Answer:
Common approaches include:

• Unit tests
• Component/integration tests
• End-to-end tests

Popular tools include:

• React Testing Library
• Vitest
• Jest
• Playwright
• Cypress

91. What is React Testing Library?

Answer:
React Testing Library encourages testing components from the user’s perspective rather than testing implementation details.

For example:

expect(
  screen.getByRole("button", { name: /submit/i })
).toBeInTheDocument();

92. Why shouldn’t you test implementation details?

Answer:
Implementation-detail tests can break when internal code changes even though user-visible behavior remains correct.

Behavior-oriented tests are generally more resilient.

93. Unit testing vs integration testing?

Answer:

Unit testing:
Tests a small isolated unit.

Integration testing:
Tests multiple components or systems working together.

For React applications, integration-style component tests often provide more meaningful confidence than testing every internal function independently.

15. Architecture and Design

94. How would you structure a large React application?

Answer:
A common feature-oriented structure might look like:

src/
├── app/
├── features/
│   ├── users/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── types/
│   └── orders/
├── components/
├── hooks/
├── services/
├── utils/
└── styles/

The exact structure should reflect team size, domain boundaries, and application complexity.

95. How do you design reusable React components?

Answer:

Focus on:

• Clear responsibilities
• Composition
• Explicit props
• Accessibility
• Stable APIs
• Avoiding excessive configuration
• Separating business logic from presentation where appropriate

Prefer:

<Card>
  <UserProfile />
</Card>

over creating an enormous component with dozens of boolean props.

96. How do you manage API calls in a large React application?

Answer:
Separate UI concerns from data-access concerns.

For example:

Component
   ↓
Custom Hook / Query
   ↓
API Client
   ↓
Backend

A dedicated server-state solution can handle:

• Caching
• Retries
• Refetching
• Request deduplication
• Pagination
• Mutation invalidation

97. Client state vs server state?

Answer:

Client state:

• Modal visibility
• Selected tab
• Form state
• UI preferences

Server state:

• Users
• Orders
• Products
• Backend-generated data

Server state has additional concerns such as caching, synchronization, freshness, retries, and invalidation.

98. How would you optimize a React application with thousands of components?

Answer:

I would:

1. Profile the application.
2. Identify expensive renders.
3. Reduce unnecessary state propagation.
4. Split large component trees.
5. Use memoization selectively.
6. Virtualize large lists.
7. Code-split routes.
8. Optimize network requests.
9. Reduce bundle size.
10. Use production profiling and real-user metrics.

The key interview point is:

Measure first, optimize second.

16. Senior-Level React Questions

99. How would you design a production-grade React application?

Answer:

I would consider the application across several layers:

                    React Application
                           │
        ┌──────────────────┼──────────────────┐
        ↓                  ↓                  ↓
    UI Layer          State Layer       Data Layer
        │                  │                  │
 Components          Client State       API/Server State
        │                  │                  │
        └──────────────────┼──────────────────┘
                           ↓
                     Infrastructure
                           │
          ┌────────────────┼────────────────┐
          ↓                ↓                ↓
       CDN/Edge          Backend        Observability

Key concerns include:

• Component architecture
• Accessibility
• TypeScript
• State management
• API/data fetching
• Authentication and authorization
• Error handling
• Performance
• Testing
• Security
• CI/CD
• Observability
• Code splitting
• SSR/Server Components where appropriate

100. What are the most important React principles for a senior developer?

Answer:

A strong senior React developer should understand more than JSX and Hooks.

The key principles are:

1. Keep state minimal

Don’t store values that can be derived.

2. Keep state close to where it’s used

Avoid global state unless there is a real reason for it.

3. Prefer composition

Build complex UIs from smaller components.

4. Treat effects as synchronization

Don’t use useEffect as a general-purpose place for application logic.

5. Optimize based on evidence

Use profiling instead of blindly adding memo, useMemo, or useCallback.

6. Separate client state from server state

They have different lifecycle and consistency requirements.

7. Design for failure

Handle loading, errors, empty states, retries, and partial failures.

8. Think about accessibility

A component isn’t production-ready simply because it looks correct.

9. Understand rendering

Know the difference between:

Component re-render
        ≠
DOM update

10. Think beyond React

A senior engineer should understand:

React
 ↓
Browser
 ↓
Network
 ↓
API
 ↓
Database
 ↓
Cloud Infrastructure

React performance and reliability are ultimately system-level concerns, not just component-level concerns.