Senior React Interview Questions (50 MCQs)

Question 1

What is the idea behind Concurrent Rendering?

Accepted Answer

Interruptible rendering and prioritized updates for a responsive UI

Answer

True parallel DOM work on many main threads

Answer

Removing JavaScript entirely

Answer

It only relates to Redux

Question 2

Which belongs to Client Components?

Accepted Answer

Hooks like `useState` and event handlers

Answer

Direct DB access with no network

Answer

Never shipping JS to the client

Answer

Requiring the use server directive

Question 3

What is React Fiber?

Accepted Answer

The interruptible reconciliation architecture since React 16

Answer

A CDN for React

Answer

A JSX replacement

Answer

The old name of create-react-app

Question 4

How does `useLayoutEffect` differ from `useEffect`?

Accepted Answer

Runs synchronously after DOM mutation, before paint

Answer

Runs on the server

Answer

Runs before render

Answer

Runs once per app

Question 5

Which commonly causes a hydration mismatch?

Accepted Answer

Rendering `Date.now()` or `Math.random()` during render

Answer

Using `useState` with a constant

Answer

Using props

Answer

Using Fragments

Question 6

What does `<Suspense fallback={...}>` do?

Accepted Answer

Shows a fallback while suspended children load

Answer

Catches errors

Answer

Memoizes components

Answer

Creates global state

Question 7

What does `React.lazy(() => import("./Chart"))` give you?

Accepted Answer

Code splitting: the component's code loads only when needed

Answer

Caches the component on the server

Answer

Makes rendering synchronous

Answer

Makes props lazy

Question 8

What is `createPortal` used for?

Accepted Answer

Rendering children into another DOM node (e.g. a modal in body)

Answer

Talking to the server

Answer

Creating routes

Answer

Running code in a Worker

Question 9

What is `useSyncExternalStore` for?

Accepted Answer

Safely subscribing to external stores without tearing in concurrent rendering

Answer

Syncing state with the server

Answer

Replacing `useState` everywhere

Answer

Saving to localStorage

Question 10

If a `

` changes to a `

` at the same tree position (same children), what does React do?

Accepted Answer

Unmounts the whole subtree and mounts it fresh, losing children's state

Answer

Only renames the tag in the DOM and keeps the children

Answer

Matches and moves the children by automatic keys

Answer

Defers the change until the browser is idle

Question 11

Which statement about the render and commit phases is correct?

Accepted Answer

Render can be interrupted and replayed; commit is applied synchronously without interruption

Answer

Both phases are interruptible in concurrent mode

Answer

Commit runs before render so the DOM is ready

Answer

`useEffect` effects run during the render phase

Question 12

What are "Lanes" in React's internal scheduler?

Accepted Answer

A bitmask model for prioritizing and grouping updates

Answer

Separate threads for rendering components in parallel

Answer

DOM event queues split by event type

Answer

CSS layers for compositing

Question 13

How does React discard a half-finished render without corrupting the current UI?

Accepted Answer

Double buffering: a `current` tree and a `workInProgress` tree linked via `alternate`

Answer

By snapshotting the DOM and restoring it

Answer

By rendering inside a hidden iframe

Answer

By undoing DOM mutations in reverse order

Question 14

Why does Hook call order matter at the implementation level?

Accepted Answer

Each Hook's state is stored as a linked list on the fiber and read by position

Answer

Hooks are identified by variable name; order only matters to the linter

Answer

Each Hook runs on its own thread

Answer

React generates a unique id per Hook at compile time

Question 15

Why can hoisting constant JSX out of a component (`const icon = <Icon />;` at module level) reduce renders?

Accepted Answer

The same element object reference triggers a bailout, skipping that subtree

Answer

Module-level JSX is compiled to static HTML at build time

Answer

Module-level elements are fully exempt from reconciliation, even for context changes

Answer

React wraps it in `React.memo` automatically

Question 16

In `memo(Comp, arePropsEqual)`, what happens if `arePropsEqual` returns `true`?

Accepted Answer

The render is skipped, since props are considered equal

Answer

The component re-renders, like `shouldComponentUpdate`

Answer

The component unmounts

Answer

Only effects run

Question 17

A component wrapped in `React.memo` reads `useContext(Theme)`. What happens when Theme changes?

Accepted Answer

It re-renders despite memo

Answer

Memo blocks it because props didn't change

Answer

It updates only after the next props change

Answer

React throws that memo and context are incompatible

Question 18

In a list with stable keys, when the last item moves to the front, what does React do?

Accepted Answer

Moves the existing fiber and DOM node, preserving its state

Answer

Remounts every item

Answer

Updates each item's content in place, shuffling the states

Answer

Re-renders only the first item and removes the rest

Question 19

In concurrent rendering, why might `analytics.track()` in a component body fire multiple times or spuriously?

Accepted Answer

React may start, abandon, and redo a render without committing

Answer

React always renders each component exactly twice in production

Answer

Global functions are disabled in concurrent mode

Answer

It's only due to HMR in development

Question 20

Besides effects, what does `StrictMode` double-invoke in development?

Accepted Answer

Component bodies, `useState`/`useMemo` initializers, and updater functions

Answer

`onClick` event handlers

Answer

`fetch` requests in Server Components

Answer

Only `componentDidCatch`

Question 21

On initial mount, what's the order of `useEffect` between parent and child?

Accepted Answer

The child's effect runs before the parent's

Answer

The parent's effect always runs first

Answer

The order is random

Answer

They all run in parallel in a Web Worker

Question 22

When `userId` changes from 1 to 2, which `userId` does the effect cleanup see?

Accepted Answer

`1`, because cleanup captures values from the render that created it

Answer

`2`, because cleanup always reads the latest props

Answer

`undefined`

Answer

It depends on whether `userId` is state or a prop

Question 23

Who is `useInsertionEffect` designed for?

Accepted Answer

CSS-in-JS library authors, to inject styles before layout effects

Answer

App developers, for data fetching

Answer

Inserting items into large lists

Answer

Running code before hydration on the server

Question 24

A navigation inside `startTransition` causes already-revealed content to suspend. What does React do?

Accepted Answer

Keeps the previous UI and waits for data instead of showing the fallback

Answer

Immediately shows the nearest Suspense fallback

Answer

Throws an error

Answer

Fully reloads the page

Question 25

In React 19, when a component inside Suspense suspends, how are its siblings handled?

Accepted Answer

The fallback commits immediately, then siblings are rendered to pre-warm their requests

Answer

React fully renders all siblings before showing the fallback

Answer

Siblings are never rendered until the first resolves

Answer

Each sibling gets an automatic Suspense boundary

Question 26

A Client Component does `const data = use(fetch(url).then(r => r.json()))`. The problem?

Accepted Answer

Each render creates a new Promise, so it keeps suspending and refetching

Answer

`use` only accepts context, not promises

Answer

`use` is forbidden in Client Components

Answer

Nothing; it's the recommended pattern

Question 27

In `startTransition(async () => { await save(); setPage("done"); })`, what's the caveat about `setPage`?

Accepted Answer

Updates after `await` aren't automatically marked as a transition; wrap them in `startTransition` again

Answer

`setPage` after `await` is never applied

Answer

Async functions aren't allowed in `startTransition`

Answer

`setPage` runs concurrently with `save`

Question 28

Why shouldn't a controlled input's `setText` be wrapped in `startTransition`?

Accepted Answer

Inputs must update synchronously; transitions are interruptible and make typing lag or jump

Answer

`startTransition` only works with `useReducer`

Answer

Transitions reset the input to an empty string

Answer

It causes a memory leak

Question 29

`useSyncExternalStore(sub, () => ({ ...store.state }))` causes an infinite loop. Why?

Accepted Answer

`getSnapshot` returns a new object every call, which React treats as a change

Answer

`subscribe` must be async

Answer

Spread is forbidden inside Hooks

Answer

The store must be in context

Question 30

Mouse position (60 times/sec) lives in a global context with hundreds of consumers. Best design?

Accepted Answer

An external store with subscriptions and selectors so only interested components render

Answer

Wrap all consumers in `React.memo`

Answer

Stabilize the context value with `useMemo`

Answer

Duplicate the context per page instead of at root

Question 31

When a file has `"use client"`, what about the modules it imports?

Accepted Answer

They also become part of the client bundle

Answer

They remain Server Components

Answer

They go to the client only if they also say `"use client"`

Answer

The build fails

Question 32

Which approach lets a Server Component render inside a Client Component (like `Modal`)?

Accepted Answer

In a parent Server Component: ``

Answer

Importing `ServerCart` inside the `Modal` file

Answer

Calling `ServerCart()` in `useEffect`

Answer

It isn't possible

Question 33

Which can NOT be passed as a prop from a Server Component to a Client Component?

Accepted Answer

A regular function like `() => alert(1)`

Answer

A Promise

Answer

A JSX element

Answer

A plain object with nested arrays

Question 34

A Server Function (`"use server"`) is only called from a button in the admin panel. Is an auth check inside it needed?

Accepted Answer

Yes, it's a public endpoint anyone can invoke directly

Answer

No, it can only be called from server components

Answer

No, React checks the session automatically

Answer

Only if it uses `GET`

Question 35

What is the "RSC payload" sent to the client?

Accepted Answer

A serialized, streamable representation of the rendered tree with references to Client Components

Answer

The final HTML of the page

Answer

The JavaScript code of all Server Components

Answer

A JSON dump of component state

Question 36

A heavy markdown library is used only in a Server Component. Its effect on the client bundle?

Accepted Answer

It isn't added to the client bundle

Answer

It's always fully included in the client bundle

Answer

It's lazy-downloaded on the client

Answer

It's only shipped in development

Question 37

What does `cache` from the `react` package do in Server Components?

Accepted Answer

Memoizes a function's result for the same arguments within a single request

Answer

Caches data across all users forever

Answer

Caches the HTTP response on a CDN

Answer

It's the Client Component equivalent of `useMemo`

Question 38

In streaming SSR with `renderToPipeableStream`, how is a slow Suspense boundary handled?

Accepted Answer

Fallback HTML is sent first, then the content streams in with an inline script that swaps it

Answer

The whole response blocks until that boundary is ready

Answer

That part renders only on the client, never with server HTML

Answer

The server returns a timeout error

Question 39

A user clicks a region not yet hydrated. What happens with selective hydration?

Accepted Answer

React prioritizes hydrating that boundary and replays the event afterward

Answer

The click is lost forever

Answer

The whole page is client-rendered from scratch

Answer

React waits to hydrate the whole page in DOM order

Question 40

What is the limitation of `suppressHydrationWarning`?

Accepted Answer

It only works one level deep, for that element's text or attributes

Answer

It fixes every mismatch in the subtree

Answer

It permanently keeps the server value and ignores the client

Answer

It only works in Server Components

Question 41

How does the React Compiler work, and how do you opt a component out?

Accepted Answer

It adds automatic memoization at build time; `"use no memo"` opts out

Answer

It wraps every component in `React.memo` at runtime; `memo(false)` opts out

Answer

It compiles code to WebAssembly; `"use js"` opts out

Answer

It removes Hooks; `"use hooks"` opts out

Question 42

Why shouldn't program correctness depend on `useMemo` (e.g. to avoid creating a connection twice)?

Accepted Answer

`useMemo` is only an optimization and React may discard its cache

Answer

`useMemo` always re-runs every render

Answer

`useMemo` is disabled in production

Answer

`useMemo` only caches primitive values

Question 43

How does `<Activity mode="hidden">` (React 19.2) behave?

Accepted Answer

Hides children, cleans up effects, but keeps state and updates at low priority

Answer

Fully unmounts children and clears state

Answer

Only sets `opacity: 0`, leaving all effects active

Answer

Halts rendering entirely and removes the DOM until visible

Question 44

In React 19, which new API reports caught and uncaught errors to a monitoring service?

Accepted Answer

The `onCaughtError` and `onUncaughtError` options of `createRoot`

Answer

A `useErrorReporter` Hook

Answer

`window.React.onError`

Answer

A `componentDidReport` method

Question 45

Since React 17, where are React's event listeners attached?

Accepted Answer

To the root container React is rendered into

Answer

To `document`

Answer

Directly to each DOM element

Answer

To `window`

Question 46

An `onScroll` handler on a parent `div` doesn't receive a scrollable child's scroll. Why?

Accepted Answer

Since React 17, `onScroll` doesn't bubble, matching the browser

Answer

`onScroll` only works on `window`

Answer

You must use `onScrollCapture` on the child

Answer

SyntheticEvents don't support scroll

Question 47

In `<Profiler>`'s `onRender` callback, what's the difference between `actualDuration` and `baseDuration`?

Accepted Answer

`actualDuration` is this render's real time with memoization; `baseDuration` estimates rendering the whole subtree without it

Answer

`actualDuration` is network time and `baseDuration` is CPU time

Answer

They're the same in different units

Answer

`baseDuration` is only the commit time

Question 48

A 50,000-row list is slow even with memo. The main fix?

Accepted Answer

Windowing/virtualization: render only visible rows

Answer

Use the index as key

Answer

Put the whole list in `useMemo`

Answer

Render the list in `useLayoutEffect`

Question 49

Which `react-dom` APIs were introduced in React 19 for early resource loading?

Accepted Answer

`preload`, `preinit`, `preconnect`, and `prefetchDNS`

Answer

`useFetch` and `usePrefetch`

Answer

`ReactDOM.cacheAsset`

Answer

`lazyAsset` and `eagerAsset`

Question 50

In React 19, how does `<link rel="stylesheet" href="..." precedence="default" />` inside a component behave?

Accepted Answer

It's hoisted and deduped in the head, and dependent content waits until it loads

Answer

It renders as raw text

Answer

It's duplicated for every component instance

Answer

It only works in class components

React · Senior · 50

What is the idea behind Concurrent Rendering?