build-react-codebase-guidelines

Use a plain function for pure transformations like formatting, filtering, and mapping that can run outside React. Use a hook only when the logic needs React state, lifecycle, effects, refs, context, or subscriptions. If a hook merely wraps a pure helper, delete the hook and export the helper.

Start with local state owned by one feature surface, then lift it to the nearest common owner when siblings need it. Use context for values many descendants read, and reserve a global store only for cross-route or cross-feature state with multiple real readers and writers.

No. Values that can be computed from props, query data, or existing state should be derived during render, not stored via useEffect. Effects should synchronize with external systems like subscriptions, timers, and observers, with correct dependencies and cleanup.

No. The guidelines target React and TypeScript frontend codebases specifically. They explicitly exclude backend or Node-only TypeScript, non-React frontends, build and CI tooling, and pure CSS or styling tasks.

Do not memoize by default. Memoize context provider values, expensive derived calculations, stable callbacks passed to memoized children, and objects or arrays whose identity affects effects or renders. Avoid default object or array literals in props that break stable identity.