Skip to main content

you-might-not-need-state

Analyze and fix unnecessary useState, derived state, and server-state-in-local-state anti-patterns

Source facts

Repository
simstudioai/sim
Last source activity
October 10, 2026 at 06:17
Detected SKILL.md language
English
Stars
29,832
Forks
3,860

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
you-might-not-need-state
description
Analyze and fix unnecessary useState, derived state, and server-state-in-local-state anti-patterns
argument-hint
[scope] [fix=true|false]
# You Might Not Need State Arguments: - scope: what to analyze (default: your current changes). Examples: "diff to staging", "PR #123", "src/components/", "whole codebase" - fix: whether to apply fixes (default: true). Set to false to only propose changes. User arguments: $ARGUMENTS ## Context React Query owns server data, nuqs (URL) owns shareable view-state (tabs, filters, search, sort, pagination, selected id), Zustand owns global client state, and `useState` owns only ephemeral UI (open/closed, hover, local form input). Server data should never be copied into useState or Zustand — React Query is the single source of truth. ## References Read these before analyzing: 1. https://react.dev/learn/choosing-the-state-structure — 5 principles for structuring state 2. https://tkdodo.eu/blog/dont-over-use-state — never store derived/computed values in state 3. https://tkdodo.eu/blog/putting-props-to-use-state — never mirror props into state via useEffect ## Anti-patterns to detect 1. **Derived state stored in useState**: If a value can be computed from props, other state, or query data, compute it inline during render instead of storing it in state. 2. **Server state copied into useState**: Never `useState` + `useEffect` to sync React Query data into local state. Use query data directly. The only exception is forms where users edit server data. 3. **Props mirrored into state**: Never `useState(prop)` + `useEffect(() => setState(prop))`. Use the prop directly, reset with a remount `key`, or — for seed-on-transition (e.g. a modal opening) — adjust during render with the `useState` prev-tracker in `.claude/rules/sim-hooks.md` "State shape" (mind its sentinel-on-mount and no-`useRef` rules). 4. **Chained useEffect state updates**: Never chain Effects that set state to trigger other Effects. Calculate all derived values in the event handler or inline during render. 5. **Storing objects when an ID suffices**: Store `selectedId` not a copy of the selected object. Derive the object: `items.find(i => i.id === selectedId)`. 6. **State that duplicates Zustand or React Query**: If the data already lives in a store or query cache, don't create a parallel useState. 7. **Shareable view-state in useState**: hand off to `/you-might-not-need-url-state`. ## Steps 1. Read the references above to understand the guidelines 2. Analyze the specified scope for the anti-patterns listed above 3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
View on GitHub