belos-street/react-best-practices

React 19 best practices, common gotchas, and performance optimization.

State & Hooks

• Multiple setState calls not batching as expected → See hooks-state-update-batching
• Reading state immediately after setState → See hooks-async-state-updates
• New state depends on previous state → See hooks-functional-updates
• Expensive initial state running on every render → See hooks-initial-state-lazy
• Mutating state directly causing bugs → See hooks-state-not-mutated-directly
• Updating object state losing other properties → See hooks-object-state-spread

useEffect

• Effect runs only once on mount → See useeffect-empty-deps
• Missing dependencies causing stale closures → See useeffect-missing-dependencies
• Forgetting to cleanup side effects → See useeffect-cleanup-function
• Using async function as effect → See useeffect-async-pattern
• Conditional useEffect calls causing errors → See useeffect-conditional-effects
• Choosing between useEffect and useLayoutEffect → See useeffect-vs-uselayouteffect

Performance

• Using useMemo unnecessarily → See usememo-unnecessary-optimization
• Object references changing causing re-renders → See usememo-object-stability
• useCallback dependency array issues → See usecallback-dependency-array
• Using useCallback instead of inline functions → See usecallback-vs-inline-functions

Components

• Mutating props directly → See component-props-immutable
• Passing content to components → See component-children-prop
• Component naming conventions → See component-naming-convention
• Setting default prop values → See component-default-props
• Prop type validation → See component-prop-types

Context

• Avoiding prop drilling → See context-avoid-prop-drilling
• Optimizing context performance → See context-performance-optimization
• Providing default values → See context-default-values
• Using multiple contexts → See context-multiple-contexts

Custom Hooks

• Naming convention → See custom-hooks-naming-convention
• Composing hooks together → See custom-hooks-composition
• Cleaning up side effects → See custom-hooks-side-effects
• Returning read-only state → See custom-hooks-readonly-state
• Hooks vs utility functions → See custom-hooks-vs-utility-functions

Refs

• useRef vs useState → See useRef-vs-state
• Accessing DOM elements → See useRef-dom-access
• Forwarding refs → See useRef-forward-ref
• Cleaning up refs → See useRef-cleanup
• Persisting values → See useRef-persistence

Event Handlers

• Naming convention → See event-handlers-naming-convention
• Avoiding inline handlers → See event-handlers-inline
• Binding handlers properly → See event-handlers-binding
• Controlling event propagation → See event-handlers-propagation
• Cleaning up event listeners → See event-handlers-cleanup

Performance

• Using React.memo → See performance-memo
• Using useCallback → See performance-usecallback
• Using useMemo → See performance-usememo
• Code splitting → See performance-code-splitting
• Virtualization → See performance-virtualization

Suspense

• Lazy loading → See suspense-lazy-loading
• Data fetching → See suspense-data-fetching
• Error boundaries → See suspense-error-boundaries
• Fallback UI → See suspense-fallback
• Concurrent features → See suspense-concurrent-features

TypeScript

• Component props typing → See typescript-component-props
• Hooks typing → See typescript-hooks
• Generics in React → See typescript-generics
• Utility types → See typescript-utility-types
• Best practices → See typescript-best-practices

Animation

• CSS transitions → See animation-css-transitions
• CSS animations → See animation-css-animations
• Framer Motion → See animation-framer-motion
• Performance optimization → See animation-performance
• Best practices → See animation-best-practices