reactlisted

# React Patterns Reference for React-specific patterns with citations. Sources in `references/sources.md`. ## Iron Law > **COMPOSITION OVER PROPS** [2][4][12] > > Use children and compound components, not prop drilling. If a component has >5 props, > it's doing too much. Split it. If you're passing data through 3+ levels, use context > or composition. Props are for configuration, not data plumbing. > "Before You memo(), try solving it with composition." — Dan Abramov [4] ## When This Skill Activates - Working with React codebases (.tsx, .jsx) — components, hooks, contexts, performance --- ## Component Structure [1][2] **Functional component order**: hooks → derived state → handlers → return. [1] **Compound components** share structure through children, not props: [2][4] ```tsx function Card({ children }: { children: React.ReactNode }) { return <div className="card">{children}</div>; } Card.Header = ({ children }: { children: React.ReactNode }) => <div className="card-header">{children}</div>; ``` **Context** for shared state across distant components — eliminates prop drilling: [1][2] ```tsx const AuthContext = createContext<AuthContextValue | null>(null); export function useAuth() { const ctx = useContext(AuthContext); if (!ctx) throw new Error('useAuth must be used within AuthProvider'); return ctx; } ``` --- ## Hooks [3][16][24] Hooks must be called at the **top level** — never inside conditions, loops, or nested functions. [16][24] Effects synchro