Agent Skills › simstudioai/sim › you-might-not-need-state

you-might-not-need-state

GitHub

分析并修复 React 代码中不必要的 useState 使用，识别派生状态、服务端状态误用及 Props 镜像等反模式，确保遵循 React Query 和 Zustand 的最佳实践。

.agents/skills/you-might-not-need-state/SKILL.md simstudioai/sim

Trigger Scenarios

需要检查 React 组件中的状态管理规范发现疑似冗余或错误的 useState/useEffect 用法审查代码以消除状态同步问题

Install

npx skills add simstudioai/sim --skill you-might-not-need-state -g -y

More Options

Non-standard path

npx skills add https://github.com/simstudioai/sim/tree/main/.agents/skills/you-might-not-need-state -g -y

Use without installing

npx skills use simstudioai/sim@you-might-not-need-state

指定 Agent (Claude Code)

npx skills add simstudioai/sim --skill you-might-not-need-state -a claude-code -g -y

安装 repo 全部 skill

npx skills add simstudioai/sim --all -g -y

预览 repo 内 skill

npx skills add simstudioai/sim --list

SKILL.md

Frontmatter

{
    "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

This codebase uses React Query for all server state and Zustand for client-only global state. useState should only be used for ephemeral UI concerns (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:

https://react.dev/learn/choosing-the-state-structure — 5 principles for structuring state
https://tkdodo.eu/blog/dont-over-use-state — never store derived/computed values in state
https://tkdodo.eu/blog/putting-props-to-use-state — never mirror props into state via useEffect

Anti-patterns to detect

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.
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.
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).
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.
Storing objects when an ID suffices: Store selectedId not a copy of the selected object. Derive the object: items.find(i => i.id === selectedId).
State that duplicates Zustand or React Query: If the data already lives in a store or query cache, don't create a parallel useState.