react-patterns

React custom hooks for data fetching should encapsulate loading states, error handling, and refetch semantics. This Skill provides reusable hook examples that manage these states predictably within TypeScript React projects.

For global state management in React, Context with useReducer suits predictable state transitions, while Zustand offers a lightweight store alternative. This Skill outlines recommendations for implementing both approaches effectively.

Optimize React performance by applying useMemo, useCallback, React.memo, lazy loading, and virtualization strategies. This Skill provides practical guidance on when and how to implement these memoization techniques.

Yes, this React patterns guidance covers TypeScript typed props, interface definitions, safe callback typing, and context-backed compound components. It applies directly to TypeScript React projects during component design.

Creating objects in render and missing effect dependencies are common React anti-patterns that cause unnecessary re-renders and stale data bugs. This Skill provides examples to identify and fix these mutable state pitfalls.

Handle controlled forms validation and error boundaries in React by using Zod for validation schemas and wrapping components with robust error boundaries. This Skill demonstrates strategies for implementing these patterns.