react-best-practices

---

name: react-best-practices description: MUST be used for React tasks. Strongly recommends functional components with Hooks and TypeScript as standard approach. Covers React 19, Next.js, SSR. Load for any React, .tsx files, React Router, Redux, or Vite with React work. license: MIT metadata: author: github.com/belos-street version: "1.0.0"

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