1---2name: react3description: This skill should be used when the user asks about "React", "React components", "React hooks", "useState", "useEffect", "JSX", "React patterns", "React best practices", or mentions React development.4---5
6# React Development
7
8Guidance for building React applications with modern patterns.
9
10---
11
12## Hooks Reference
13
14### Built-in Hooks
15
16| Hook | Purpose | When to Use |
17|------|---------|-------------|
18| **useState** | Local state | Simple values, toggles, form inputs |
19| **useReducer** | Complex state | Multiple sub-values, state machines |
20| **useEffect** | Side effects | Data fetching, subscriptions, DOM manipulation |
21| **useContext** | Consume context | Theme, auth, global state |
22| **useRef** | Mutable reference | DOM access, persist values across renders |
23| **useMemo** | Memoize value | Expensive calculations |
24| **useCallback** | Memoize function | Stable callbacks for child components |
25| **useLayoutEffect** | Sync DOM effects | Measure DOM before paint |
26| **useId** | Unique IDs | Accessibility, form labels |
27
28### Hook Rules
29
30| Rule | Why |
31|------|-----|
32| Only call at top level | Hooks rely on call order |
33| Only call from React functions | Components or custom hooks |
34| Name custom hooks with "use" | Convention for linting |
35
36---
37
38## Component Patterns
39
40| Pattern | Use Case | Key Concept |
41|---------|----------|-------------|
42| **Presentational** | Pure UI, no logic | Props in, JSX out |
43| **Container** | Data fetching, state | Wraps presentational |
44| **Compound Components** | Related components sharing state | Parent provides context |
45| **Render Props** | Share behavior | Function as child |
46| **Custom Hooks** | Reusable stateful logic | Extract from components |
47| **HOC** | Legacy pattern | Prefer hooks instead |
48
49---
50
51## State Management Decision
52
53| Solution | Best For | Trade-offs |
54|----------|----------|------------|
55| **useState** | Component-local | Simplest, prop drilling for sharing |
56| **useReducer** | Complex local state | More boilerplate, predictable |
57| **Context** | Theme, auth, i18n | Re-renders all consumers |
58| **Zustand** | Simple global | Minimal API, good devtools |
59| **Redux Toolkit** | Complex global | Powerful, more boilerplate |
60| **React Query/TanStack** | Server state | Caching, background refresh |
61| **Jotai/Recoil** | Atomic state | Fine-grained updates |
62
63**Key concept**: Server state (API data) and client state (UI state) should be managed differently. Use React Query for server state.
64
65---
66
67## useEffect Patterns
68
69| Pattern | Dependency Array | Purpose |
70|---------|------------------|---------|
71| Run once | `[]` | Initial fetch, setup |
72| Run on change | `[dep1, dep2]` | React to specific changes |
73| Run every render | (omit) | Rarely needed |
74| Cleanup | Return function | Subscriptions, timers |
75
76### Common Pitfalls
77
78| Pitfall | Solution |
79|---------|----------|
80| Infinite loops | Include all dependencies, use useCallback |
81| Stale closures | Use refs or functional updates |
82| Race conditions | Cleanup flag or AbortController |
83| Missing deps | Trust the linter, refactor if needed |
84
85---
86
87## Performance Optimization
88
89| Technique | When to Use | Cost |
90|-----------|-------------|------|
91| **React.memo** | Expensive child, frequent parent renders | Shallow comparison |
92| **useMemo** | Expensive calculation | Memory for cached value |
93| **useCallback** | Callback passed to memoized child | Memory for function |
94| **Lazy loading** | Large components, routes | Initial load vs waterfall |
95| **Virtualization** | Long lists (100+ items) | Complexity |
96
97**Key concept**: Don't optimize prematurely. Measure first with React DevTools Profiler.
98
99---
100
101## Conditional Rendering
102
103| Pattern | Use Case |
104|---------|----------|
105| **&&** | Show/hide single element |
106| **Ternary** | Two alternatives |
107| **Early return** | Multiple conditions, cleaner |
108| **Switch/object map** | Many alternatives |
109
110---
111
112## Form Handling
113
114| Approach | Use Case |
115|----------|----------|
116| **Controlled** | Need validation, formatting |
117| **Uncontrolled (refs)** | Simple forms, performance |
118| **React Hook Form** | Complex forms, validation |
119| **Formik** | Legacy, full-featured |
120
121**Key concept**: Controlled components store value in React state. Uncontrolled use DOM as source of truth.
122
123---
124
125## Project Structure
126
127| Directory | Purpose |
128|-----------|---------|
129| **components/ui/** | Generic, reusable (Button, Card) |
130| **components/features/** | Feature-specific compositions |
131| **hooks/** | Custom hooks |
132| **contexts/** | React contexts + providers |
133| **pages/** or **routes/** | Route components |
134| **services/** or **api/** | API calls, data fetching |
135| **types/** | TypeScript types |
136| **utils/** | Pure helper functions |
137
138---
139
140## Best Practices
141
142| Practice | Why |
143|----------|-----|
144| Keep components small (<100 lines) | Readable, testable |
145| Colocate related code | Easier to maintain |
146| Lift state only when needed | Avoid unnecessary complexity |
147| Use TypeScript for props | Catch errors, better DX |
148| Prefer composition over inheritance | React's design philosophy |
149| Extract custom hooks | Reusable logic, testable |
150
151## Resources
152
153- React Docs: <https://react.dev/>
154- Patterns: <https://patterns.dev/>
eyadsibai