advanced · 26 minute study

Effects synchronize with something outside React

Thinking of effects as synchronization prevents loops, stale subscriptions and unnecessary derived-state effects.

Loading progressEvidence grows with practice

Useful preparation · 2 prerequisites

Use this as a map, not a lock. If these ideas are familiar, continue.

Name events; centralize transitions — When several controls change related state, a reducer makes the valid transitions visible in one place.
A closure keeps access to its lexical environment — Closures power callbacks and private state, but also explain stale values, memory retention and confusing loop behavior.

First, build a mental model

Rendering describes UI. An effect synchronizes the committed component with an external system, and its cleanup releases the previous synchronization before a changed one begins or the component leaves.

Effects run after commit; they do not belong in pure render.
Declare reactive dependencies read by the effect.
React compares dependency values with Object.is; newly created objects may differ every render.
Development Strict Mode may perform an extra setup/cleanup cycle to reveal missing cleanup.

Read the codejsx · educational example

function Room({ roomId }) {
  useEffect(() => {
    const connection = connect(roomId);
    connection.open();
    return () => connection.close();
  }, [roomId]);
  return <h1>Room {roomId}</h1>;
}

Commit A
The effect synchronizes with room A.
Change to B
Cleanup closes A before the effect opens B.
Unmount
Cleanup closes the current connection.

Production thinking

Take this beyond the example.

Remove unnecessary effects before adding memoization. Handle cleanup, cancellation and stale responses; do not suppress dependency warnings to preserve a broken mental model.

Sources and further reading

Your evidence

unseen is a local learning signal, not a credential or proof of production competence.

Explain the mental model, then explicitly acknowledge it. Opening a page is not evidence.

Supported retries can complete this lesson. Independent evidence and delayed review determine the skill stage.

Next lesson · A ref is a stable container; a render is a snapshot →