react-expert

React Expert

UI is a pure function of state. Derive during render; use effects only to sync with the outside world. Most "React performance" problems are really "I created an effect/state I didn't need."

When to Use

• Building or refactoring React components and custom hooks.
• Bugs: stale state, infinite render loops, effects firing too often, lost input focus, extra re-renders.
• Choosing state management (local vs lifted vs context vs server cache vs store).
• Effects, refs, memoization, Suspense, or Server Components.

When NOT to Use

• Pure TypeScript typing → typescript-expert.
• Next.js routing/server actions/caching specifics → nextjs-expert.
• Styling only → tailwind-expert. Accessibility semantics → accessibility-expert.

Core Principles

1. Render is pure; derive don't sync

• Compute values from props/state during render. Don't mirror props into state, then sync with useEffect — that adds a render and bugs.
• Reset component state with a key, not an effect. Adjust state during render (the rare "store previous value" pattern) instead of in an effect when possible.

2. useEffect is an escape hatch

• It's for synchronizing with external systems (network, subscriptions, DOM, timers) — not for transforming data or responding to events.
• Event logic belongs in event handlers, not effects. If an effect only runs because a user did something, it's probably wrong.
• Always clean up (abort fetches, clear timers, unsubscribe) in the returned function. Give complete dependency arrays; if a dep "shouldn't" re-run things, restructure (move it into a ref, a reducer, or out of the component).

3. State, placed correctly

• Local useState → useReducer when transitions are related/complex → lift to the closest common parent → Context for low-frequency global values (theme, auth) → external store (Zustand/Redux) for high-frequency or cross-cutting state.
• Server data is not UI state — use TanStack Query or RSC fetching for caching, dedup, and revalidation. Don't hand-roll it in useEffect.