react-best-practices

React Best Practices

"Components should be like pure functions: predictable, composable, and easy to reason about."

When to Use

• Building new React components or pages
• Reviewing React code for anti-patterns
• Optimizing rendering performance
• Choosing state management approaches
• Implementing accessible interactive components
• Structuring a React project

Component Design Principles

Composition Over Configuration

• Prefer composable children over deeply nested prop configs
• Use the compound component pattern for related UI pieces
• Avoid prop drilling beyond 2 levels; use context or composition instead

Single Responsibility

• Each component should do one thing well
• If a component file exceeds 200 lines, consider splitting
• Separate data-fetching logic from presentation logic

Component Naming

• PascalCase for component names matching the file name
• Prefix context providers with their domain (e.g., AuthProvider, ThemeProvider)
• Use descriptive names: UserProfileCard, not Card or UPC

Hooks Patterns

useState

• Use for simple, local UI state (toggles, form inputs, counters)
• Initialize with a function for expensive computations: useState(() => compute())
• Group related state into an object or use useReducer when state transitions are complex

useEffect

• Always specify a dependency array
• Return a cleanup function for subscriptions, timers, and event listeners
• Avoid using useEffect for derived state; compute it during render instead
• Do not use useEffect to sync props to state (this is almost always a bug)

useReducer

• Prefer over useState when next state depends on previous state
• Use for state machines and complex multi-field forms
• Keep reducer functions pure and outside the component

useMemo and useCallback

• Do not prematurely optimize; measure first with React DevTools Profiler
• Use useMemo for expensive computations that depend on specific inputs
• Use useCallback for functions passed to memoized child components
• Both are optimization hints, not semantic guarantees