/meta-reviewing-web-reviewing

name: meta-reviewing-web-reviewing
description: React component review — hook rules, effect cleanup, derived state, keys, memoization evidence and keyboard access. Load when reviewing a diff that adds or changes React components or hooks.

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](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.

**Check that list keys come from the data's identity.** React matches children across renders by key, so an index key hands one row's state to another when the list reorders, filters or inserts.

**Ask for memoization only where the diff creates a cost you can name.** Re-rendering is React's default rather than a defect, and a finding with no measured cost is one the author has no way to verify.

</critical_requirements>

---

**Auto-detection:** `useEffect`, `useLayoutEffect`, `useEffectEvent`, `useMemo`, `useCallback`, `React.memo`, `use()`, `react-hooks/exhaustive-deps`, `react-hooks/rules-of-hooks`, `key={index}`, `onClick` on a `div`, `htmlFor`, `aria-label`, `showModal`, `defaultValue`, `preventDefault`, `.tsx` diff, `.jsx` diff, React PR review, component review

**Applies to:**

• Diffs that add or change React components or custom hooks
• Hook call order, dependency arrays, and suppressions of the hooks lint rules
• Cleanup for effects and ref callbacks, and async results that arrive out of order
• Props typing, and derived versus mirrored state
• List keys and component identity
• Controlled inputs and form submission handlers
• Whether a render-performance finding has evidence behind it
• Keyboard and screen-reader access for the elements the diff adds

**Handled elsewhere:**

• The severity scale, the approval decision and how a finding is written — the general review discipline; this skill only places React defects on that scale
• Server routes, build configuration and CI changes in the same diff — each is reviewed against its own domain's checks
• A full accessibility audit — contrast, live regions and the complete keyboard contract of complex widgets; this review covers what the diff adds
• Visual design the spec does not define
• The choice of styling approach — the file's existing one is the yardstick

---

<philosophy>

Philosophy

**Review the component the diff builds, not the one you would have built.** React allows many valid shapes for the same UI, so a finding is a defect or a departure from the codebase's own pattern — never an alternative.

React's defects live in time rather than in one render. A callback closing over an old value, a resource outliving its effect, state following a slot instead of an item: each reads correctly on the page in front of you and fails on the next render. That is why the checks below trace what changes between renders, and why a diff that looks right can still be wrong.

</philosophy>

---

<decision_framework>

Where React findings land

These place React defects on the general severity scale. Nice to Have — tests beyond adequate, documentation, a labelled idea — has no React-specific case.

Would leaving it break behaviour — a stale read, a leak, lost state or input,
a control some users cannot operate?
├─ A hook callback reads a changing value its array omits → MUST FIX
├─ A hook called in a condition, loop or after an early return (use() excepted) → MUST FIX
├─ A listener, timer, subscription or observer started with no cleanup → MUST FIX
├─ An index or render-generated key on a list that reorders, filters or inserts → MUST FIX
├─ A component defined inside another component's body → MUST FIX
├─ value on an input with neither onChange nor readOnly → MUST FIX
├─ An added control no keyboard reaches or no screen reader names → MUST FIX
└─ NO → Is the cost concrete in this diff?
    ├─ An async result set in an effect with no ignore flag or abort — a race → SHOULD FIX
    ├─ Props copied into state by an effect — a stale render, then drift → SHOULD FIX
    ├─ An input value that starts undefined or null — a mode switch React warns about → SHOULD FIX
    ├─ Work measured near 1ms or more, re-run by updates unrelated to its inputs → SHOULD FIX
    ├─ A fresh literal defeating a memo child the codebase placed (compiler off) → SHOULD FIX
    ├─ A react-hooks suppression with no stated reason — a deviation in the changed lines → SHOULD FIX
    ├─ any on props, events or refs — a wrong field access now compiles → SHOULD FIX
    ├─ useMemo/useCallback the diff adds with no demonstrable cost to avoid — churn → SHOULD FIX
    ├─ Hook logi