state-disciplinelisted

Apply React 19 / Next.js 16 state discipline — `useState` is the last resort, not the default. Derive state from props/URL/data, use a query library for server state, use event handlers for one-shot side effects, use `key` to reset state, use `useMountEffect` for one-time external sync, never bare `useEffect`. Use when the user pastes `useState + useEffect + fetch`, reaches for `useState` to mirror a prop, hand-rolls a derived value via `useEffect + setState`, syncs state with URL via `useEffect`, or asks "should I add useState here?". Pairs with `data-fetching` (Server Components first) and `forms` (the form toolkit owns field state). Refuses to apply outside React 19 / Next.js 16 (App Router) projects. Not for: server-data reads (use `data-fetching`), form field values (use `forms`), React Native state patterns (RN has no URL state primitive — use plain React patterns), or generic React tutorials (this is a discipline skill for an already-scaffolded Next.js 16 codebase, not a learning resource).
lukedj78/dev-flow · ★ 4 · Web & Frontend · score 77

Install: claude install-skill lukedj78/dev-flow

# state-discipline — `useState` is the last resort This skill governs **where state lives** in a Next.js 16 App Router / React 19 codebase. The framework's primitives (Server Components, URL `searchParams`, props, query libraries, controlled inputs, `useOptimistic`, `useTransition`) cover ~90% of "I need some state" cases. `useState` and `useEffect` are escape hatches for the last 10%. The bug is silent: code that uses `useState` + `useEffect` to mirror a prop, derive a value, or sync with the URL **works** — until the source of truth changes and the mirror desyncs. No error, no warning, just wrong UI. ## When this skill applies - The user pastes `useState + useEffect` and asks for review. - The user is about to add `useEffect` (at all). - The user is about to add `useState` to mirror a prop. - The user asks "should I add `useState` here?". - The user is about to add `useState` to hold form field values (route them to the `forms` skill). - The user is about to add `useState` to hold server-fetched data (route them to the `data-fetching` skill). - The user asks to **audit** a codebase against the React state rules. ## Contract Follows the dev-flow contract — see `references/contracts.md`. Key facts: - Reads `meta.json#stack.framework` and `stack.nextjs_version`. For monorepo, reads `stack.monorepo.web.*`. - **Refuses** if `stack.framework ∉ {"next", "monorepo"}` or `stack.nextjs_version != "16"`. The principles transfer to other React 19 setups (Remix v3, plain React 19