React code review checklist

react-code-review-checklist.md

State management

• Is reactive state created & managed where it's needed, instead of further up the component tree?
• Is prop drilling avoided, within reason? Further reading
• Is state derived when possible, instead of synced? Further reading
• Are persistent, non-reactive pieces of state (e.g. instances of third party libraries, resize/intersection/mutation observer instances, etc.) stored with useRef?

Common array iterations

• Have iterations been avoided or simplified as often as possible for performance and/or readability?
• Are .reduce() callbacks reasonably readable?

Find-in-page: .concat( .every( .filter( .find( .findIndex( .forEach( .includes( .indexOf( .join( .map( .reduce( .slice( .some( .sort( for(

Follow the reactive dependency chain

• Is it obvious enough?
• Can it be made more readable and/or efficient with memoized state?

Rendered lists

• Are items keyed properly?

Effect timing

• Are browser APIs always accessed after component mount (in useEffect or useLayoutEffect)?
• Are effect dependency lists exhaustive?

Data fetching

• Are errors & failed requests caught and tracked?
• When appropriate, are loading animations and error messages rendered?

Type safety

• Can any any types be narrowed?

Reusability and good code organization

• Has lower level, commonly-needed UI logic & reactive state been extracted to hooks?
• Are functions and side effects defined reasonably close to any reactive state they interact with?