Skip to main content

you-might-not-need-state

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

Informations de source

Dépôt
simstudioai/sim
Dernière activité de la source
2 octobre 2026 à 08:59
Langue détectée de SKILL.md
anglais
Étoiles
29 779
Forks
3 852

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
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 main", "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.
Voir sur GitHub