React App Review Checklist

This outlines a list of items I look for when reviewing a React app.

## Foundation: Framework / Generator / Boilerplate / Package management

- Using the ideal framework for the use case: cra, Next, Remix, Gatsby, etc.
- npm, Yarn, pnpm
- TypeScript

## A11y

- See [my a11y repo](https://github.com/coryhouse/a11y)

## General State

- As local as possible
- State that can be derived, is derived
- Global state is used sparingly
- [Using the right type of state for each job](https://app.pluralsight.com/library/courses/react-state-managing/table-of-contents)

## Context

- Context is centralized and abstracted
- Context is split
- Context is applied to the lowest subtree
- Context use is justified and minimal - not merely used to avoid passing props a couple levels

## Hooks

- Repeated logic is abstracted and centralized via Hooks

## Performance

To reduce renders:
- Split components
- Pass only the necessary data
- Pass children down (reduces prop-drilling too)
- Lazy load

## Reusable components

- Documented via Storybook and ZeroHeight, or custom docs in react-docgen
- Props with JSDoc comments above each
- Component use cases
- Import statement
- Demos
- Do's and Don'ts
- A11y concerns
- Mutually exclusive props are impossible
- Prefer false defaults (since prop existence conveys truth)
-

## Dev workflow

- Calling stable, local mock APIs
- Custom dev tools
- Build initially in Storybook
- Cypress-driven development

## Testing

- Using Jest with testing-library and Cypress with testing-library
- Comprehensive Unit and Integration tests
- Reliable E2E tests (via a test db if you own the stack e2e, or via high level "smoke tests" if you're calling APIs your team doesn't own)
- Use Storybook stories in unit tests

## Other topics

Playwright - Test in the browser
ESLint - Check code quality and errors for safe React development
Storybook 
Reusable component / how to comment
Add fields (select/dropdown, field types)
Add search / filter projects
Add login / Global data via context or alternatives
State management best practices
Styling - CSS modules and Tailwind
Dropdown for project manager 
Reusable component design
Custom hooks
Clean up types, organize types, and use utility types
Review 55 lessons doc 
Data fetching
Caching
Routing (React Router 6.4 loaders, etc too) 
Layout component 
Review issues
Custom dev tools
useReducer and tests
Login with Context