Middle React Interview Questions (50 MCQs)

Question 1

What is `useEffect` mainly for?

Accepted Answer

Syncing with external systems (network, DOM, subscriptions)

Answer

A full replacement for `useState`

Answer

CSS only

Answer

Required in every component

Question 2

Why is `key={index}` risky in mutable lists?

Accepted Answer

Item identity can mismatch and break state/UI

Answer

React does not accept keys

Answer

It only fails on mobile

Answer

It always causes a TypeScript error

Question 3

When does `React.memo` skip a re-render?

Accepted Answer

When props are shallow-equal

Answer

Always, even if props change

Answer

Only in Server Components

Answer

Never

Question 4

When is `useReducer` better than `useState`?

Accepted Answer

When state is complex with several related transitions

Answer

For every simple boolean

Answer

Only in class components

Answer

When there is no state

Question 5

What happens when a Context Provider's `value` changes?

Accepted Answer

Every consumer of that context re-renders

Answer

Only consumers reading the changed field

Answer

Nothing re-renders

Answer

The whole app remounts

Question 6

What is a custom hook?

Accepted Answer

A `use`-prefixed function that reuses stateful logic

Answer

A component that returns JSX

Answer

Shared state across all instances

Answer

A built-in browser API

Question 7

Which violates the Rules of Hooks?

Accepted Answer

Calling `useState` inside an `if`

Answer

Calling a hook at the top of a component

Answer

Calling a hook inside a custom hook

Answer

Several `useEffect`s in one component

Question 8

What's wrong with `setInterval(() => setCount(count + 1), 1000)` in an effect with empty deps?

Accepted Answer

Stale closure: `count` stays initial, so it never passes 1

Answer

Nothing is wrong

Answer

It re-renders infinitely

Answer

The interval never runs

Question 9

Which error does an Error Boundary NOT catch?

Accepted Answer

Errors inside event handlers

Answer

Render errors in children

Answer

Errors in child lifecycles

Answer

Errors in a child constructor

Question 10

A child wrapped in `React.memo` re-renders on every parent render. The parent passes `onSelect={() => pick(id)}`. Why?

Accepted Answer

A new function is created each render, so the shallow comparison fails

Answer

`React.memo` ignores function props entirely

Answer

Arrow functions make the child lose its state

Answer

`React.memo` only works for class components

Question 11

What's the problem with `const opts = { page }; useEffect(() => load(opts), [opts]);`?

Accepted Answer

`opts` is a new object each render, so the effect always re-runs

Answer

Objects can't be dependencies; it fails to compile

Answer

The effect never runs

Answer

React deep-compares objects automatically, so it's fine

Question 12

A user switches profiles quickly and sometimes stale data shows. Fix inside the effect?

Accepted Answer

Set an `ignore` flag in cleanup and discard stale responses

Answer

Change the dependency array to `[]`

Answer

Call `fetch` in the render body instead of an effect

Answer

Use `useLayoutEffect` to guarantee ordering

Question 13

`<EditProfile userId={id} />` must fully reset when `id` changes. Simplest approach?

Accepted Answer

`<EditProfile key={id} userId={id} />`

Answer

An effect that manually resets every state when `id` changes

Answer

`React.memo` on `EditProfile`

Answer

Calling `forceUpdate`

Question 14

`{isAdmin ?

Accepted Answer

It's preserved, because the type and position are the same

Answer

It resets, because they're two different JSX elements

Answer

React throws an error

Answer

Only `useRef` values are preserved

Question 15

What is the main purpose of `useId`?

Accepted Answer

Generating unique ids stable across server and client for accessibility attributes

Answer

Generating `key`s for list items

Answer

Creating ids for database records

Answer

Identifying component instances in DevTools

Question 16

Switching tabs renders a heavy list and the UI freezes. How does `useTransition` help?

Accepted Answer

Marks the update non-urgent so it's interruptible and provides `isPending`

Answer

Moves rendering to a Web Worker

Answer

Delays the list render with `setTimeout` until the browser is idle

Answer

Automatically virtualizes the list

Question 17

You have a search input and a heavy results list, and you don't own the state setter. Right tool?

Accepted Answer

`useDeferredValue(query)` and pass the deferred value to the list

Answer

`useLayoutEffect` for synchronous updates

Answer

`flushSync` on every keystroke

Answer

`useRef` to hold the query

Question 18

Which is true of `dispatch` from `useReducer` and the `useState` setter?

Accepted Answer

Their identity is stable across renders, so they needn't be dependencies

Answer

They're new functions each render and must be wrapped in `useCallback`

Answer

They can only be used inside effects

Answer

They return the new state value

Question 19

`<AuthContext value={{ user, login }}>` in a frequently re-rendering component. The issue?

Accepted Answer

A new object each render re-renders every consumer

Answer

Context only accepts primitive values

Answer

Consumers never update

Answer

Only the first consumer updates

Question 20

Why do people sometimes put state and `dispatch` in two separate contexts?

Accepted Answer

So components that only dispatch don't re-render when state changes

Answer

Because a context can't hold functions

Answer

Because `useReducer` doesn't work without two contexts

Answer

It's required for SSR support

Question 21

You need to keep a `setTimeout` id to cancel later; it isn't shown in the UI. Best choice?

Accepted Answer

`useRef`

Answer

`useState`

Answer

A `let` variable in the component body

Answer

`useMemo`

Question 22

Why shouldn't you read or write `ref.current` during render (except lazy init)?

Accepted Answer

It makes render impure and unpredictable, since changing it triggers no render

Answer

`ref.current` always throws before commit

Answer

Refs are only readable in class components

Answer

It causes an infinite render loop

Question 23

In React 19, what happens if a ref callback returns a function?

Accepted Answer

That function runs as cleanup when the element detaches

Answer

The return value is ignored

Answer

It throws, because ref callbacks must not return anything

Answer

The function is stored as `ref.current`

Question 24

What is `useImperativeHandle` for?

Accepted Answer

Customizing and limiting what a ref exposes to the parent

Answer

Running an effect before paint

Answer

Creating global state

Answer

Preventing children from re-rendering

Question 25

After adding a list item you must immediately scroll to it. Which API applies the DOM update synchronously?

Accepted Answer

`flushSync` from `react-dom`

Answer

`startTransition`

Answer

`useDeferredValue`

Answer

`await setItems(...)`

Question 26

In React 18+, how many renders do two `setState` calls inside a `setTimeout` callback cause?

Accepted Answer

One render, thanks to automatic batching

Answer

Two, since batching only happens in event handlers

Answer

Zero, because setTimeout is outside React

Answer

Three, depending on call order

Question 27

What is the correct signature of `useActionState` in React 19?

Accepted Answer

`const [state, formAction, isPending] = useActionState(fn, initialState)`

Answer

`const { data, error } = useActionState(url)`

Answer

`const [pending, start] = useActionState()`

Answer

`const state = useActionState(form)`

Question 28

`useFormStatus` always returns `pending: false` in the same component that renders the `<form>`. Why?

Accepted Answer

It only reads a parent `<form>`, so it must be called in a child of the form

Answer

It only works with controlled forms

Answer

`StrictMode` must be disabled

Answer

It only works in Server Components

Question 29

How does `useOptimistic` behave after the action finishes (success or failure)?

Accepted Answer

The optimistic value is discarded and it falls back to the real state

Answer

The optimistic value is persisted permanently

Answer

The page reloads on failure

Answer

It automatically retries the request

Question 30

In React 19, when a function passed to `<form action={fn}>` succeeds, what happens to uncontrolled fields?

Accepted Answer

The form is reset automatically

Answer

Values stay until the user clears them

Answer

The page navigates to the form URL

Answer

It throws, since action must be a string

Question 31

What distinguishes `use(ThemeContext)` from `useContext(ThemeContext)`?

Accepted Answer

`use` can be called inside conditions or loops

Answer

`use` doesn't re-render when the context changes

Answer

`use` only works in class components

Answer

`use` ignores the context's default value

Question 32

In React 19, which is the new, recommended syntax for providing a context?

Accepted Answer

`<ThemeContext value="dark">`

Answer

`<ThemeContext.Consumer value="dark">`

Answer

`<Provider context={ThemeContext}>`

Answer

`ThemeContext.set("dark")`

Question 33

If a component calls `useContext(Ctx)` with no provider above it, what's returned?

Accepted Answer

The default value passed to `createContext`

Answer

Always `undefined`

Answer

A runtime error

Answer

The value of the last provider rendered anywhere

Question 34

Which error is NOT caught by an Error Boundary?

Accepted Answer

An error inside an event handler like `onClick`

Answer

An error thrown while rendering a child

Answer

An error inside a child's lifecycle

Answer

An error in a child class constructor

Question 35

An input on a page re-renders the whole heavy page on each keystroke. Best fix without memo?

Accepted Answer

Move the input state into a small separate component (move state down)

Answer

Move the state into a global context

Answer

Use `forceUpdate` less

Answer

Wrap the whole page in `useMemo`

Question 36

In ``, what happens to `HeavyList` when `ScrollTracker`'s state changes?

Accepted Answer

It doesn't re-render, because the `children` element was created by the outer parent

Answer

It always re-renders because it's a child

Answer

It unmounts and remounts

Answer

It only skips if `HeavyList` is in `React.memo`

Question 37

Where does "A component is changing an uncontrolled input to be controlled" usually come from?

Accepted Answer

`value` was `undefined` at first and later got a value

Answer

Using `onChange` instead of `onInput`

Answer

Rendering the input inside a Fragment

Answer

Using `defaultValue` together with `ref`

Question 38

Two components both call `useCounter()`. Do they share state?

Accepted Answer

No, each call has its own independent state

Answer

Yes, custom hooks are singletons

Answer

Only if the hook name starts with `use`

Answer

Yes, if they're defined in the same file

Question 39

A chat effect depends on `roomId` but also reads `theme` for a notification, and you don't want to reconnect when theme changes. Fix?

Accepted Answer

Put the notification logic in `useEffectEvent`

Answer

Remove `theme` from the deps and silence the linter

Answer

Wrap `theme` in `useMemo`

Answer

Use `useLayoutEffect`

Question 40

Which pattern correctly debounces a search request with an effect?

Accepted Answer

`setTimeout` in the effect and `clearTimeout` in cleanup, with `[query]` deps

Answer

`setTimeout` in the effect with `[]` and no cleanup

Answer

Calling `fetch` in `onChange`, then `setTimeout` on state

Answer

Using `useMemo` to delay

Question 41

What usually causes the "Too many re-renders" error?

Accepted Answer

Calling setState unconditionally in the render body

Answer

Having more than 10 `useState` calls

Answer

Large lists without keys

Answer

An effect with an empty dependency array

Question 42

What happens if setState is called with a value equal to the current one (per `Object.is`)?

Accepted Answer

React skips re-rendering children and firing effects

Answer

It always fully re-renders the whole tree

Answer

It throws an error

Answer

State resets to its initial value

Question 43

Why should `const Chart = lazy(() => import("./Chart"))` be declared at module level, not inside a component?

Accepted Answer

Inside a component it creates a new type each render and resets state

Answer

`import()` isn't allowed inside functions

Answer

Suspense only recognizes module-level lazies

Answer

The bundler strips it out

Question 44

In React 19, what happens if you render `<title>` inside a component?

Accepted Answer

React hoists it into the document `<head>`

Answer

It shows as text inside `body`

Answer

It throws; an external library is required

Answer

It's only ignored in Server Components

Question 45

A component shows "Loaded" after a fetch. Which RTL query fits?

Accepted Answer

`await screen.findByText("Loaded")`

Answer

`screen.getByText("Loaded")` immediately

Answer

`screen.queryByText("Loaded")` without waiting

Answer

`setTimeout` then `getByText`

Question 46

Why is `@testing-library/user-event` preferred over `fireEvent`?

Accepted Answer

It simulates real user interaction with the full event sequence

Answer

It's faster because it dispatches no events

Answer

It changes component state directly

Answer

It only works for snapshot tests

Question 47

What do you use to test a custom hook in isolation with RTL?

Accepted Answer

`renderHook` and read `result.current`

Answer

Calling the hook directly in the test function

Answer

Enzyme's `shallow`

Answer

`ReactDOM.renderToString`

Question 48

A `resize` listener on `window` added in an effect sees stale state and listeners pile up. Correct fix?

Accepted Answer

Remove the same function with `removeEventListener` in cleanup and set deps correctly

Answer

Add the listener in the render body

Answer

Use `onResize` on a `div`

Answer

Call `removeEventListener` with a new arrow function

Question 49

Which is a reasonable use of `useMemo`?

Accepted Answer

Filtering a multi-thousand item array passed to a memoized child

Answer

Computing `a + b` for two numbers

Answer

Running a side effect like `fetch`

Answer

Replacing `useState` to store user input

Question 50

Which scenario best justifies `useReducer` over several `useState` calls?

Accepted Answer

Several related states changing together across many events

Answer

A single boolean to toggle a modal

Answer

Needing global state across pages

Answer

Needing to run async code inside the reducer

React · Middle · 50

What is `useEffect` mainly for?