React Component Review Patterns

Quick Guide: Trace what changes between renders — dependency arrays, cleanups, keys, component identity — before judging what one render shows. Accessibility is checked for the elements the diff adds. A performance finding names a cost the diff creates, and where React Compiler is on, memoization is the compiler's job. Three version facts change a finding: use() may be called conditionally (React 19), useEffectEvent takes event logic out of an effect's dependencies (React 19.2), and since React 18 setting state after unmount is silent.

Detailed Resources:

• examples/core.md — each pattern's defect and its fix, as a reviewer meets them in a diff

<critical_requirements>

Before reviewing a React diff

Trace each hook's dependency array against what its callback reads. A value read but not listed stays pinned to the render that created the callback, so the UI shows stale data once that value changes, and nothing errors.

Pair everything an effect or ref callback starts with a cleanup that stops it. Without one, each re-run adds another listener, timer or subscription, and the last one outlives the component.

Check that every interactive element the diff adds is reachable and operable by keyboard, shows where focus is, and has an accessible name. A native <button> or <a href> brings focus, keyboard activation and a role, and an onClick on a <div> brings none of them; a style that removes the focus outline leaves a keyboard user unable to see where they are.