React Render Skill

React Rendering & Effects Guide

Authoritative reference for React escape hatches: refs, Effects, and custom Hooks. Based on official React documentation.

Quick Decision: Do You Need an Effect?

Ask: "Why does this code need to run?"

If there is no external system involved, you almost certainly don't need an Effect.

Core Concepts

Refs (useRef)

• Store values that persist across renders without triggering re-renders
• Access via ref.current (mutable, synchronous)
• Never read/write ref.current during rendering (exception: lazy init if (!ref.current) ref.current = new Thing())
• Use for: timeout/interval IDs, DOM elements, non-rendering data

Refs vs State: State triggers re-renders; refs don't. State is immutable (use setter); refs are mutable. State has render snapshots; refs are always current.

DOM Refs

const inputRef = useRef(null);
// ...
<input ref={inputRef} />;
// After commit: inputRef.current is the DOM node
inputRef.current.focus();

• React sets ref.current during commit phase, not during render
• For lists of refs, use a ref callback with a Map -- see refs-and-dom.md
• Forward refs to child components via the ref prop; restrict with useImperativeHandle
• Use flushSync when you need state updates flushed to DOM before reading it

Effects (useEffect)

Effects synchronize components with external systems. They run after render (during commit).

useEffect(() => {
  // setup: start synchronizing
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
    // cleanup: stop synchronizing
    connection.disconnect();
  };
}, [roomId]); // re-run when roomId changes

Dependency array behavior:

• useEffect(fn) -- runs after every render
• useEffect(fn, []) -- runs on mount only
• useEffect(fn, [a, b]) -- runs on mount + when a or b change (compared with Object.is)

You cannot choose your dependencies. They are determined by the reactive values read inside the Effect. The linter enforces this. Never suppress the linter.

Dev mode: Strict Mode runs Effects twice (mount -> unmount -> mount) to verify cleanup works.

For full Effect patterns, cleanup examples, and the lifecycle model, see effects-guide.md.

Critical: Anti-Patterns to Avoid

Full catalog of 12 anti-patterns with correct alternatives in anti-patterns.md.

Most common mistakes:

1. Derived state in Effect -- Calculate during render instead
2. Event logic in Effect -- Use event handlers instead
3. Resetting state on prop change -- Use key prop instead
4. Chains of Effects -- Consolidate logic in event handler
5. Object/function dependencies -- Move inside Effect or extract primitives

Dependency Management

When dependencies cause problems (too frequent, infinite loops), change the code, not the deps:

1. Move non-reactive values outside the component
2. Move dynamic objects/functions inside the Effect
3. Extract primitives from object props via destructuring
4. Use updater functions: setCount(c => c + 1) instead of reading count
5. Use useEffectEvent to read reactive values without re-triggering the Effect

See dependencies-and-events.md for full strategies.

Custom Hooks

• Must start with use + capital letter
• Share stateful logic, not state itself -- each call creates independent state
• Re-run on every render like components; code must be pure
• Wrap received event handler callbacks in useEffectEvent
• Name after purpose (useChatRoom), not lifecycle (useMount)

Anti-pattern: Don't create useMount, useEffectOnce, useUpdateEffect -- these hide dependency bugs and fight React's reactive model.

See custom-hooks.md for patterns and examples.

Reference Files

Converted and distributed by TomeVault — claim your Tome and manage your conversions.