react-typescript-clean-code

Use useEffect only to synchronize with external systems like DOM events, WebSockets, timers, or canvas, always with a cleanup function. Never use it for derived state, event handling, or data fetching; calculate during render, use event handlers, or TanStack Query instead.

useMemo is justified for expensive computations over large datasets (roughly 1,000+ elements or O(n²) work) or to preserve referential equality for React.memo children and hook dependencies. Trivial operations like string concatenation or array length should never be memoized.

No. useCallback only helps when the function is passed to a React.memo-wrapped child or appears in another hook's dependency array. Callbacks passed to native HTML elements or unmemoized children gain nothing and add memory and readability overhead.

Use TanStack Query instead of manual useEffect fetching. It handles caching, deduplication, request cancellation, and retries automatically, removing the need for loading-state effects and abort logic in components.

Use list virtualization with @tanstack/react-virtual on the web or @shopify/flash-list in React Native when rendering more than 50-100 items. Virtualization delivers far larger performance gains than micro-optimizations with useMemo.

Prefer discriminated string literal unions like 'active' | 'inactive' over enums. They are type-safe, tree-shakeable, and avoid the runtime footprint and numeric coercion pitfalls of TypeScript enums.