[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71H9BXF511W2R3B73S5P9ZN":3,"skill-same:01M71H9BXF511W2R3B73S5P9ZN":63},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":13,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":48,"install":49,"resources":62},"01M71H9BXF511W2R3B73S5P9ZN","03-state-management",null,"React state management patterns — lifting state, colocation, URL state, server state with TanStack Query, local state with useState\u002FuseReducer","lambda-solver\u002Flambdabench-pro","lambda-solver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F279071046?v=4","01M71H55W2WK3PM6RRAY9JZWAJ","01M71H55WRT9XAFDAVACTCC2XP",0,"MIT","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F03-state-management\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"03 state management","state","state management","management","with","server","opencode","tanstack query","local","react state management","tanstack","URL","patterns","query","react","2026-11-10 10:12:30",false,"---\nname: 03-state-management\ndescription: React state management patterns — lifting state, colocation, URL state, server state with TanStack Query, local state with useState\u002FuseReducer\nlicense: MIT\ncompatibility: opencode\n---\n\n# React State Management\n\n## State Colocation\n\nKeep state as close to where it's used as possible.\n\n```tsx\n\u002F\u002F ❌ lifted too high\nfunction App() {\n  const [isOpen, setIsOpen] = useState(false); \u002F\u002F only used in Modal\n  return (\n    \u003Cdiv>\n      \u003CModal isOpen={isOpen} onClose={() => setIsOpen(false)} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F ✅ colocated\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003CModalTrigger \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n\nfunction ModalTrigger() {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    \u003C>\n      \u003CButton onClick={() => setIsOpen(true)}>Open\u003C\u002FButton>\n      \u003CModal isOpen={isOpen} onClose={() => setIsOpen(false)} \u002F>\n    \u003C\u002F>\n  );\n}\n```\n\n## Server State vs Client State\n\n| Type          | Tool                  | Examples                               |\n| ------------- | --------------------- | -------------------------------------- |\n| Server state  | TanStack Query        | API data, user profile, search results |\n| URL state     | TanStack Router       | Filters, pagination, sort order        |\n| Global client | Effect Atom \u002F Zustand | Auth user, theme, sidebar state        |\n| Local client  | useState \u002F useReducer | Form inputs, modal open, toggle        |\n\n## useState Patterns\n\n```tsx\n\u002F\u002F ✅ boolean toggle\nconst [isOpen, setIsOpen] = useState(false)\n\u003Cbutton onClick={() => setIsOpen((prev) => !prev)}>Toggle\u003C\u002Fbutton>\n\n\u002F\u002F ✅ derived from props — use initial value only\nconst [value, setValue] = useState(initialValue)\n\n\u002F\u002F ❌ sync state from props — use key prop instead\n\u002F\u002F If you need to reset when prop changes:\n\u003CForm key={userId} initialData={userData} \u002F>\n\n\u002F\u002F ✅ object state with single setter\nconst [form, setForm] = useState({ name: '', email: '' })\nsetForm((prev) => ({ ...prev, name: 'Alice' }))\n\n\u002F\u002F ✅ functional updates for counters\nsetCount((c) => c + 1)\n```\n\n## useReducer for Complex State\n\n```tsx\ntype State = {\n  status: \"idle\" | \"loading\" | \"success\" | \"error\";\n  data: Data | null;\n};\ntype Action =\n  | { type: \"fetch\" }\n  | { type: \"success\"; payload: Data }\n  | { type: \"error\"; payload: Error }\n  | { type: \"reset\" };\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"fetch\":\n      return { ...state, status: \"loading\" };\n    case \"success\":\n      return { status: \"success\", data: action.payload };\n    case \"error\":\n      return { ...state, status: \"error\" };\n    case \"reset\":\n      return { status: \"idle\", data: null };\n    default:\n      return state;\n  }\n};\n\nfunction DataFetcher() {\n  const [state, dispatch] = useReducer(reducer, { status: \"idle\", data: null });\n  \u002F\u002F dispatch({ type: 'fetch' })\n}\n```\n\n## URL as State (TanStack Router)\n\n```tsx\n\u002F\u002F ✅ filter in URL — shareable, back-button works\nconst { filter } = route.useSearch();\nconst navigate = route.useNavigate();\n\n\u002F\u002F Update URL instead of local state\nnavigate({ search: (prev) => ({ ...prev, filter: \"active\" }) });\n\n\u002F\u002F ❌ local state for filters\nconst [filter, setFilter] = useState(\"all\"); \u002F\u002F lost on refresh\n```\n\n## Effect Atom for Global State\n\n```tsx\n\u002F\u002F ✅ atom for shared server state\nconst usersAtom = runtime.atom(\n  Effect.gen(function* () {\n    const api = yield* ApiClient;\n    return yield* api.getUsers();\n  }),\n);\n\n\u002F\u002F ✅ use in any component\nfunction UserList() {\n  const result = useAtomValue(usersAtom);\n  return AsyncResult.match(result, {\n    onInitial: () => \u003CLoading \u002F>,\n    onFailure: (e) => \u003CError error={e} \u002F>,\n    onSuccess: ({ value }) => (\n      \u003Cdiv>\n        {value.map((u) => (\n          \u003CUserCard key={u.id} user={u} \u002F>\n        ))}\n      \u003C\u002Fdiv>\n    ),\n  });\n}\n```\n\n## Form State\n\n```tsx\n\u002F\u002F ✅ controlled with single state object\nconst [fields, setFields] = useState({ email: \"\", password: \"\" });\nconst [errors, setErrors] = useState\u003CRecord\u003Cstring, string>>({});\n\n\u002F\u002F ✅ validation on submit\nconst handleSubmit = (e: FormEvent) => {\n  e.preventDefault();\n  const validation = validate(fields);\n  if (!validation.ok) {\n    setErrors(validation.errors);\n    return;\n  }\n  submit(fields);\n};\n\n\u002F\u002F ✅ reset form\nconst reset = () => {\n  setFields({ email: \"\", password: \"\" });\n  setErrors({});\n};\n```\n","# React State Management\n\n## State Colocation\n\nKeep state as close to where it's used as possible.\n\n```tsx\n\u002F\u002F ❌ lifted too high\nfunction App() {\n  const [isOpen, setIsOpen] = useState(false); \u002F\u002F only used in Modal\n  return (\n    \u003Cdiv>\n      \u003CModal isOpen={isOpen} onClose={() => setIsOpen(false)} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F ✅ colocated\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003CModalTrigger \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n\nfunction ModalTrigger() {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    \u003C>\n      \u003CButton onClick={() => setIsOpen(true)}>Open\u003C\u002FButton>\n      \u003CModal isOpen={isOpen} onClose={() => setIsOpen(false)} \u002F>\n    \u003C\u002F>\n  );\n}\n```\n\n## Server State vs Client State\n\n| Type          | Tool                  | Examples                               |\n| ------------- | --------------------- | -------------------------------------- |\n| Server state  | TanStack Query        | API data, user profile, search results |\n| URL state     | TanStack Router       | Filters, pagination, sort order        |\n| Global client | Effect Atom \u002F Zustand | Auth user, theme, sidebar state        |\n| Local client  | useState \u002F useReducer | Form inputs, modal open, toggle        |\n\n## useState Patterns\n\n```tsx\n\u002F\u002F ✅ boolean toggle\nconst [isOpen, setIsOpen] = useState(false)\n\u003Cbutton onClick={() => setIsOpen((prev) => !prev)}>Toggle\u003C\u002Fbutton>\n\n\u002F\u002F ✅ derived from props — use initial value only\nconst [value, setValue] = useState(initialValue)\n\n\u002F\u002F ❌ sync state from props — use key prop instead\n\u002F\u002F If you need to reset when prop changes:\n\u003CForm key={userId} initialData={userData} \u002F>\n\n\u002F\u002F ✅ object state with single setter\nconst [form, setForm] = useState({ name: '', email: '' })\nsetForm((prev) => ({ ...prev, name: 'Alice' }))\n\n\u002F\u002F ✅ functional updates for counters\nsetCount((c) => c + 1)\n```\n\n## useReducer for Complex State\n\n```tsx\ntype State = {\n  status: \"idle\" | \"loading\" | \"success\" | \"error\";\n  data: Data | null;\n};\ntype Action =\n  | { type: \"fetch\" }\n  | { type: \"success\"; payload: Data }\n  | { type: \"error\"; payload: Error }\n  | { type: \"reset\" };\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"fetch\":\n      return { ...state, status: \"loading\" };\n    case \"success\":\n      return { status: \"success\", data: action.payload };\n    case \"error\":\n      return { ...state, status: \"error\" };\n    case \"reset\":\n      return { status: \"idle\", data: null };\n    default:\n      return state;\n  }\n};\n\nfunction DataFetcher() {\n  const [state, dispatch] = useReducer(reducer, { status: \"idle\", data: null });\n  \u002F\u002F dispatch({ type: 'fetch' })\n}\n```\n\n## URL as State (TanStack Router)\n\n```tsx\n\u002F\u002F ✅ filter in URL — shareable, back-button works\nconst { filter } = route.useSearch();\nconst navigate = route.useNavigate();\n\n\u002F\u002F Update URL instead of local state\nnavigate({ search: (prev) => ({ ...prev, filter: \"active\" }) });\n\n\u002F\u002F ❌ local state for filters\nconst [filter, setFilter] = useState(\"all\"); \u002F\u002F lost on refresh\n```\n\n## Effect Atom for Global State\n\n```tsx\n\u002F\u002F ✅ atom for shared server state\nconst usersAtom = runtime.atom(\n  Effect.gen(function* () {\n    const api = yield* ApiClient;\n    return yield* api.getUsers();\n  }),\n);\n\n\u002F\u002F ✅ use in any component\nfunction UserList() {\n  const result = useAtomValue(usersAtom);\n  return AsyncResult.match(result, {\n    onInitial: () => \u003CLoading \u002F>,\n    onFailure: (e) => \u003CError error={e} \u002F>,\n    onSuccess: ({ value }) => (\n      \u003Cdiv>\n        {value.map((u) => (\n          \u003CUserCard key={u.id} user={u} \u002F>\n        ))}\n      \u003C\u002Fdiv>\n    ),\n  });\n}\n```\n\n## Form State\n\n```tsx\n\u002F\u002F ✅ controlled with single state object\nconst [fields, setFields] = useState({ email: \"\", password: \"\" });\nconst [errors, setErrors] = useState\u003CRecord\u003Cstring, string>>({});\n\n\u002F\u002F ✅ validation on submit\nconst handleSubmit = (e: FormEvent) => {\n  e.preventDefault();\n  const validation = validate(fields);\n  if (!validation.ok) {\n    setErrors(validation.errors);\n    return;\n  }\n  submit(fields);\n};\n\n\u002F\u002F ✅ reset form\nconst reset = () => {\n  setFields({ email: \"\", password: \"\" });\n  setErrors({});\n};\n```\n",{"name":5,"license":14,"description":7,"compatibility":29},"main","816c073aaf171300af3605b06f7ec5aa7370ef0b","reference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F03-state-management","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro","https:\u002F\u002Fgithub.com\u002Flambda-solver","2026-05-31 17:08:46",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add lambda-solver\u002Flambdabench-pro --skill 03-state-management",{"tool":55,"command":56},"bunx","bunx skills add lambda-solver\u002Flambdabench-pro --skill 03-state-management",{"tool":58,"command":59},"pnpm","pnpm dlx skills add lambda-solver\u002Flambdabench-pro --skill 03-state-management","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F03-state-management\u002FSKILL.md",true,[],[64,92,110,131,150,167],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":73,"publishedAt":38},"01M71H9FNA5D6Y4ANXD18Z1Z3X","tmux-workflow","Development workflow with tmux — run dev servers, Storybook, and background processes in persistent sessions with live logs, while keeping OpenCode free for chat","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Ftmux\u002FSKILL.md",[70],{"categoryNo":71,"categoryName":72,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[74,75,76,27,77,78,79,80,81,82,83,29,84,85,86,87,88,89,90,91],"tmux","workflow","tmux workflow","dev servers","background","processes","storybook","live","servers","run","chat","logs","development workflow","free","dev","sessions","for","development",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":99,"publishedAt":38},"01M71H9DQJDAJVZX37NDN99D3P","04-anti-patterns","React anti-patterns to avoid — manual JSX repetition, useEffect misuse, reference instability, prop drilling, conditional hooks, and common performance traps","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F04-anti-patterns\u002FSKILL.md",[98],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[35,100,101,102,103,104,105,106,107,108,109,29,37],"anti patterns","04 anti patterns","anti-patterns","common","jsx","reference","conditional","hooks","manual","performance",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":38},"01M71H9AAGVWMYQ4NG82QPYCTE","02-component-composition","React component composition patterns — render props, compound components, list rendering with map, slot patterns, and layout primitives","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F02-component-composition\u002FSKILL.md",[116],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[118,119,120,121,37,122,123,35,124,125,126,127,128,129,130,29,27],"02 component composition","component","Composition","list","primitives","components","composition patterns","map","rendering","render","react component","layout","compound",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":138,"publishedAt":38},"01M71H98RDXRQZDR496SRD906M","01-fp-style","React functional programming style — pure components, hooks conventions, Effect Atom integration, and Tailwind patterns","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style\u002FSKILL.md",[137],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[139,140,141,142,143,144,107,35,145,146,29,147,148,37,149,123],"01 fp style","style","Tailwind","tailwind patterns","functional programming","effect","conventions","integration","atom","functional","programming",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":157,"publishedAt":38},"01M71H95PYGAWBS5C8KN0C4WGT","react-animation","React animation with react\u002Fmotion (Framer Motion) — declarative animations, gestures, layout animations, and performance best practices","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fanimation\u002FSKILL.md",[156],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[158,37,159,160,27,161,162,163,164,165,129,29,166,109],"react animation","Animation","declarative","best practices","motion","animations","gestures","framer","framer motion",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":177,"publishedAt":38},"01M71H92TG8T2E5ZQ95PHAKZZC","04-bun-test","Bun built-in test runner — zero-config testing for Effect, React, and TypeScript projects","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Feffect-ts\u002Ftesting\u002F04-bun-test\u002FSKILL.md",[173,176],{"categoryNo":174,"categoryName":175,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[178,179,180,181,144,182,183,37,29,184,185,186,187,90,188],"bun test","04 bun test","bun","test","projects","runner","config","typescript","testing","ZeRO","test runner"]