About react-patterns
react-patterns is a reference skill for developers seeking guidance on React component design, state management, and optimization. It links focused guidance on state, memoization, and conditional logic.
Key features
- 01Derived values and scoped state
- 02Complex state management patterns
- 03Memoization for O(n) operations
- 04Type narrowing with Loader/Inner
- 05Explicit conditional rendering
Use cases
- 01Choosing component state boundaries
- 02Managing complex React state
- 03Optimizing expensive computations
- 04Writing conditional rendering logic
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/react-patternsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/conditional-logic.mdmemoization.mdstate-management.mdDetails
From the project READMEReact Patterns
Core React patterns for component design, state management, and optimization.
State Philosophy
Avoid state variables. Prefer derived values and props. Scope state to the smallest subtree that needs it. Use discriminated unions for complex state.
See state-management.md for:
- Derived values over state
- Component boundaries for state scoping
- Context API patterns
- Zustand for complex state
- State machines over multiple useState
Memoization
Required for any O(n) operation. Memoize atomically to minimize dependency arrays. Use Loader/Inner pattern to narrow types before useMemo.
See memoization.md for:
- When to useMemo
- Atomic memoization
- useCallback for handlers
- Loader/Inner pattern for type narrowing
Conditional Logic
Use affirmative logic, explicit conditionals, and ternaries over &&. Early returns for guard clauses.
See conditional-logic.md for:
- Affirmative logic
- Explicit conditionals
- Conditional rendering
- Type narrowing with conditionals
- Early returns