# A React Code Review Checklist — React

Source: https://www.skillbyai.com/en/react/t-check

> Catch common bugs before they ship.

## Questions for every component

Are props read-only and state minimal, with derived values computed during render? Are state updates immutable, using updater functions when based on previous state? Do lists use stable keys from data? Do effects only synchronise with external systems, list their dependencies and clean up? Are fetches protected against race conditions or handled by a data library? Are forms controlled and validated on the server too? Is memoisation added only where profiling shows a need? Are error boundaries around independent areas? Are there behaviour tests?

## The checklist

Use it in code reviews.

```text
[ ] props read-only; minimal state; derived values not stored
[ ] immutable updates; updater functions for previous-state updates
[ ] stable data ids as keys; key used to reset state on purpose
[ ] effects only for external sync; deps complete; cleanup present
[ ] fetch races handled (ignore flag / AbortController / data library)
[ ] controlled inputs; server-side validation
[ ] context split by change frequency; custom hooks for shared logic
[ ] memo/useMemo/useCallback only where profiled
[ ] error boundaries around widgets/sections
[ ] behaviour tests by role/label; hooks lint rules on
```

## Let the linter do half the review

The react-hooks rules and TypeScript catch many checklist items automatically.

**Quiz:** Which item belongs on a React review checklist?

- [ ] Use array index keys for reorderable lists
- [ ] Mutate state arrays with push
- [x] Effects list complete dependencies and clean up subscriptions
- [ ] Store every derived value in state

*Answer:* Effects list complete dependencies and clean up subscriptions. Correct effects, immutable state, stable keys.