React Skills

Decide when to use React.memo, useMemo, and useCallback based on cost vs benefit, referential equality, and re-render behavior. Use when optimizing React performance, fixing unnecessary re-renders, or evaluating memoization patterns.

Build polymorphic React components using an `as` prop with full TypeScript support for prop inference, ref forwarding, and prop conflict resolution. Use when typing components that render different elements, handling refs, or fixing TS issues with polymorphic patterns.

Implement TanStack Query mutations with proper optimistic updates, including cancel → snapshot → update → rollback sequencing, cache invalidation, and loading/error handling. Use when working with useMutation, fixing rollback issues, or is invalidating too early/late.

Move React state to the appropriate level, lifting it for shared use, pushing it down when local, and avoiding unnecessary global state. Use when dealing with prop drilling, misplaced state, or deciding between local state, context, or global stores.

Audit useEffect hooks for proper cleanup, including removing listeners, canceling subscriptions, clearing timers, aborting fetches, and disconnecting observers. Use when debugging memory leaks, duplicate effects, or state updates on unmounted components.

Fix incorrect or missing useEffect dependency arrays, handling exhaustive-deps issues, stale closures, and intentional omissions. Use when effects re-run incorrectly, read stale values, or trigger eslint warnings across useEffect, useCallback, or useMemo.