React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization.

React Best Practices Performance optimization and composition patterns for React components. Contains 33 rules across 6 categories focused on reducing re renders, optimizing bundles, component composition, and avoiding common React pitfalls. When to Apply Reference these guidelines when: Writing new React components Reviewing code for performance issues Refactoring existing React code Optimizing bundle size Working with hooks and state Rules Summary Bundle Size Optimization (CRITICAL) bundle barrel imports @rules/bundle barrel imports.md Import directly from source, avoid barrel files. bundle conditional @rules/bundle conditional.md Load modules only when feature is activated. bundle preload @rules/bundle preload.md Preload on hover/focus for perceived speed. Re render Optimization (MEDIUM) rerender functional setstate @rules/rerender functional setstate.md Use functional setState for stable callbacks. rerender derived state no effect @rules/rerender derived state no effect.md Derive state during render, not in effects. rerender lazy state init @rules/rerender lazy state init.md Pass function to useState for expensive initial values. rerender dependencies @rules/rerender dependencies.md Use primitive dependencies in effects. rerender derived state @rules/rerender derived state.md Subscribe to derived booleans, not raw values. rerender memo @rules/rerender memo.md Extract expensive work into memoized components. rerender memo with default value @rules/rerender memo with default value.md Hoist default non primitive props to constants. rerender simple expression in memo @rules/rerender simple expression in memo.md Don't wrap simple primitive expressions in useMemo. rerender move effect to event @rules/rerender move effect to event.md Put interaction logic in event handlers, not effects. rerender transitions @rules/rerender transitions.md Use startTransition for non urgent updates. rerender use ref transient values @rules/rerender use ref transient values.md Use refs for transient frequent values. Rendering Performance (MEDIUM) rendering conditional render @rules/rendering conditional render.md Use ternary, not && for conditionals with numbers. rendering hoist jsx @rules/rendering hoist jsx.md Extract static JSX outside components. rendering content visibility @rules/rendering content visibility.md Use content visibility for long lists. rendering animate svg wrapper @rules/rendering animate svg wrapper.md Animate wrapper div, not SVG element (for GPU acceleration). rendering svg precision @rules/rendering svg precision.md Reduce SVG coordinate precision with SVGO. rendering hydration no flicker @rules/rendering hydration no flicker.md Use inline script for client only data to prevent flicker. rendering hydration suppress warning @rules/rendering hydration suppress warning.md Suppress expected hydration mismatches. rendering client only @rules/rendering client only.md Render browser only components with ClientOnly and a fallback. rendering use hydrated @rules/rendering use hydrated.md Use useHydrated for SSR/CSR divergence. rendering usetransition loading @rules/rendering usetransition loading.md Prefer useTransition over manual loading states. fault tolerant error boundaries @rules/fault tolerant error boundaries.md Place error boundaries at feature boundaries. Client Patterns (MEDIUM) client passive event listeners @rules/client passive event listeners.md Use passive listeners for scroll/touch. client localstorage schema @rules/client localstorage schema.md Version and minimize localStorage data. Hooks (HIGH) hooks limit useeffect @rules/hooks limit useeffect.md Use useEffect only when absolutely necessary. Prefer derived state or event handlers. hooks useeffect named functions @rules/hooks useeffect named functions.md Use named function declarations in useEffect for better debugging and self documentation. Composition Patterns (HIGH) composition avoid boolean props @rules/composition avoid boolean props.md Don't add boolean props to customize behavior. Use composition instead. composition compound components @rules/composition compound components.md Structure complex components as compound components with shared context. composition state provider @rules/composition state provider.md Lift state into provider components for cross component access. composition explicit variants @rules/composition explicit variants.md Create explicit variant components instead of prop combinations. composition children over render props @rules/composition children over render props.md Prefer children for composition. Use render props only when passing data back. composition avoid overabstraction @rules/composition avoid overabstraction.md Avoid rigid configuration props; prefer composable children APIs. composition typescript namespaces @rules/composition typescript namespaces.md Use TypeScript namespaces to combine component and its types for single import access. Important: Namespaces should only contain types, never runtime code.

frontend-react-best-practices