react-patterns

Topics in the source

• React Patterns
• When to Activate
• Core Principles
• 1. Render is a Pure Function of Props and State
• 2. Side Effects Outside Render
• 3. Composition Over Inheritance
• Hooks Discipline
• State Location Decision Tree

Idiomatic React 18/19 patterns for building robust, accessible, performant component trees. Writing or modifying React function components, custom hooks, or component trees Reviewing JSX/TSX files Designing state shape or component composition Migrating class components or older forwardRef/useEffect-heavy code Choosing between local state, lifted state, context, and external stores Working with Server Components / Client Components (Next.js App Router, RSC) Implementing forms with React 19 actions or controlled inputs Wiring data fetching with TanStack Query / SWR / RSC Derived state in useEffect adds a render cycle, can desync, and obscures the data flow. Effects, mutations, network calls, and subscriptions live in event handlers or useEffect — never in the render body. React has no inheritance model for components. Compose with children, render props, or component props. See rules/react/hooks.md for the full ruleset. Highlights: Top-level only, never conditional Cleanup every subscription, interval, listener Functional updater (setX(prev => prev + 1)) when new state depends on old Default position: do not memoize — add useMemo/useCallback only when a profiler or a dependency chai

This is an excerpt. Refer to the complete source and its current requirements.