Based on React 18 concurrency model.

1. Underlying principles (core distinguishing questions)

1️⃣ Why can’t Hooks be written in if?

Follow-up question:

• How does React know which state the current useState corresponds to?
• What happens if one less hook is executed?
• Are hooks in Fiber an array or a linked list?Why?

Real inspection:

• Fiber structure
• hook one-way linked list
• memoizedState pointer movement mechanism
• mount vs update dispatcher

If the candidate can tell:

fiber.memoizedState -> hook1 -> hook2 -> hook3

Basically, they are high-level players.

2️⃣ How are the dependency arrays of useEffect compared?

Follow-up question:

• Is it a deep comparison or a shallow comparison?
• Why do objects often cause infinite loops?
• How to store deps internally in React?

Real answer:

• Object.is shallow comparison
• Last time deps existed hook.memoizedState
• Compare one by one when updatingEffect

3️⃣ Why is the effect executed twice in strict mode?

Not simply answer "development mode detection".

Follow-up question:

• Is it render twice or effect twice?
• When is cleanup executed?
• Will the production environment do this?

Inspection:

• mount → destroy → mount process simulation
• Side-effect idempotent design capabilities

2. Closure & State Trap Class

4️⃣ Why does the following code print 0?

useEffect(() => {
  setInterval(() => {
    console.log(count)
  }, 1000)
}, [])

Follow-up question:

• Is React "responsive"?
• Is this a React bug?
• How to design a stable useInterval?

Advanced answers must mention:

• The render phase forms a closure
• state exists fiber
• The effect captures the old variable

5️⃣ How to completely solve the closure problem?

Name three types:

1. Functional update
2. useRef saves the latest value
3. useEvent (Experimental API)

Being able to talk about useEvent is a plus.

3. Concurrency model class

6️⃣What problem does useTransition essentially solve?

This is not the answer to "prevent lagging".

Follow-up question:

• How does it change update priority?
• How to mark transition internally in React?
• Will frames be dropped?

Inspection:

• lane model
• Scheduling priority
• Interruptible rendering

7️⃣ What is the essential difference between useDeferredValue and useMemo?

Many people will say "one cache, one delay".

Real difference:

• useMemo is the render stage cache
• useDeferredValue is the scheduling layer degradation priority

8️⃣ Is it possible that useEffect will not be executed in concurrent mode?

Answer: Possibly.

Follow-up question:

• In which case?
• What happens if render is interrupted?
• Commit will trigger the effect

4. Performance optimization category

9️⃣ Why does useCallback sometimes make performance worse?

Advanced answer:

• Additional hook records
• deps compare costs
• Child components without memo are meaningless
• GC pressure

🔟 How to avoid full refresh of Context?

Examine real architectural capabilities.

Excellent answer:

• context split
• useContextSelector
• External state library (zustand/jotai)
• selector mode

5. Source code level issues (basically architecture level if you can tell)

1️⃣1️⃣ Please briefly describe the internal implementation of useState

Must mention:

hook = {
  memoizedState,
  queue: { pending },
  next
}

dispatch triggers scheduleUpdateOnFiber

1️⃣2️⃣ How to implement batch updates in React?

React is not implemented through simple timers, but through priorities and task queues.

Follow-up question:

• What is the difference between React 17 and 18?
• Why was there no batch processing in setTimeout before?

Features	React 17	React 18
Batch Update Scope	Lifecycle and composition events only.	Comprehensive automatic batch processing (including Promise, setTimeout, native events).
Rendering Mode	Synchronous, uninterruptible rendering.	Concurrent Rendering, interruptible and slicable.
Main API	ReactDOM.render	ReactDOM.createRoot (new API must be used to enable new features).
NEW FEATURES	None.	Introduce useTransition, useDeferredValue to handle non-urgent updates.
Suspense	Only code splitting is supported.	Supports server-side rendering (SSR) and data retrieval.

Why doesn't React 17 (and before) batch in setTimeout?

The fundamental reason behind this is the loss of Execution Context.

Core mechanism: the "switch" of synchronization

In React 17, batch updates are based on Synthetic Event System realized.

• When the user clicks the button, React will first set an internal flag (such as isBatchingUpdates) to true.
• Then execute your onClick function.
• After the function is executed, React sets the flag back to false and triggers a re-render.

Why does setTimeout "escape"?

When setTimeout is written in your code, the execution sequence is as follows:

1. React enters click event processing and turns on "batch mode".
2. When setTimeout is encountered, the callback function inside is pushed into the browser's Event Queue for asynchronous waiting.
3. The onClick synchronization code ends, React turns off the batch mode and completes rendering.
4. A long time later, the callback in setTimeout is triggered, and at this time React's batch switch has been turned off.
5. every call setState , React found that it was not in batch mode, so it had to forced immediately Carry out a complete rendering process.

6. Real architecture scenario questions (AI Chat/large system)

1️⃣3️⃣ How do you design an interruptible streaming output Hook?

Scenario: AI Chat

Requirements:

• Support streaming data
• Support stop
• Support regeneration
• Prevent memory leaks

See if he mentions:

• AbortController
• ref save controller
• effect cleanup
• transition optimization UI

1️⃣4️⃣ If there are 2000 messages, how to avoid re-rendering stuck?

Excellent answer:

• status split
• useTransition
• virtual list
• key stable
• memo layered

7. Extreme thinking questions (differentiating architects)

1️⃣5️⃣ If you were asked to implement a simplified version of the Hooks system, how would you design it?

Inspection:

• Global pointer currentHook
• Array or linked list
• render reset index

1️⃣6️⃣ Why are Hooks more suitable for concurrency mode than classes?

Key points:

• None this
• No lifecycle coupling
• Side effects are unified in the commit phase

8. Death serial questioning (ultimate)

1️⃣7️⃣ Why doesn’t React adopt the responsiveness of Vue?

Comparison:

• Vue dependency collection
• React explicitly relies on arrays
• Scheduling control difference

Involves understanding of Vue.js.

1️⃣8️⃣ How do you judge whether a Hook design is elegant?

Standard:

• dependency minimization
• Do not leak internal implementation
• Side effects are controllable
• Concurrency safety
• Can be combined

9. The real finale question

1️⃣9️⃣ Why does React distinguish between the render phase and the commit phase?

If he says:

Because it needs to support interrupts

That's a rudimentary answer.

Advanced answers must mention:

• predictability
• side effect isolation
• Concurrency safety
• time slice

2️⃣0️⃣ What happens if an effect triggers setState?

Follow-up question:

• Will there be an infinite loop?
• How to avoid it?
• How to prevent infinite updates internally in React?