{"id":19054302,"url":"https://github.com/zengxiaoluan/use-atom-store","last_synced_at":"2026-05-06T19:03:27.435Z","repository":{"id":198141302,"uuid":"700129455","full_name":"zengxiaoluan/use-atom-store","owner":"zengxiaoluan","description":"Easy manage your React external store.","archived":false,"fork":false,"pushed_at":"2023-11-17T04:08:25.000Z","size":95,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-02T11:09:57.937Z","etag":null,"topics":["react-store","reacthooks","reactjs","use-atom","valtio"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-atom-store","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zengxiaoluan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-04T02:09:57.000Z","updated_at":"2024-03-08T01:44:17.000Z","dependencies_parsed_at":"2023-11-15T05:20:55.361Z","dependency_job_id":"2437b5c3-2c2f-4fea-9a80-9eb67c7bd9a9","html_url":"https://github.com/zengxiaoluan/use-atom-store","commit_stats":null,"previous_names":["zengxiaoluan/use-ab-store","zengxiaoluan/use-atom-store"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zengxiaoluan%2Fuse-atom-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zengxiaoluan%2Fuse-atom-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zengxiaoluan%2Fuse-atom-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zengxiaoluan%2Fuse-atom-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zengxiaoluan","download_url":"https://codeload.github.com/zengxiaoluan/use-atom-store/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240109861,"owners_count":19749203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-store","reacthooks","reactjs","use-atom","valtio"],"created_at":"2024-11-08T23:37:47.553Z","updated_at":"2025-11-11T19:04:21.827Z","avatar_url":"https://github.com/zengxiaoluan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-atom-store\n\nThis library is aim to handle outer store's state in your react component that which solved the render accurately problem, I hope you will enjoy it.\n\n```shell\nnpm i use-atom-store -S\n```\n\nYou can use this like:\n\n```jsx\nimport { createAtomStore, useAtomStore } from \"use-atom-store\";\n\nlet myStore = createAtomStore({ count: 0, hello: \"hello\" }); // create a store\n\nfunction changeHello() {\n  myStore.setState((prev) =\u003e {\n    return {\n      ...prev,\n      hello: prev.hello + \"world\",\n    };\n  });\n}\n\nfunction changeCount() {\n  myStore.setState((prev) =\u003e {\n    return {\n      ...prev,\n      count: prev.count + 1,\n    };\n  });\n}\n\nexport default function App() {\n  return (\n    \u003cmain\u003e\n      \u003cbutton onClick={changeHello}\u003eChange Hello\u003c/button\u003e\n      \u003cbutton onClick={changeCount}\u003eChange Count\u003c/button\u003e\n\n      \u003cDisplayHello\u003e\u003c/DisplayHello\u003e\n      \u003cDisplayCount\u003e\u003c/DisplayCount\u003e\n    \u003c/main\u003e\n  );\n}\n\nlet helloRenderTimes = 0;\nfunction DisplayHello() {\n  let [state, setState] = useAtomStore(myStore, (state) =\u003e ({\n    hello: state.hello,\n  }));\n\n  return (\n    \u003cdiv\n      onClick={() =\u003e {\n        setState((prev) =\u003e ({ ...prev, hello: prev.hello + \"world\" }));\n      }}\n    \u003e\n      {state.hello} - helloRenderTimes: {++helloRenderTimes}\n    \u003c/div\u003e\n  );\n}\n\nlet countRenderTimes = 0;\nfunction DisplayCount() {\n  let [state, setState] = useAtomStore(myStore, (state) =\u003e ({\n    count: state.count,\n  }));\n\n  return (\n    \u003cdiv\n      onClick={() =\u003e {\n        setState((prev) =\u003e ({ ...prev, count: prev.count + 1 }));\n      }}\n    \u003e\n      {state.count} - countRenderTimes: {++countRenderTimes}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Automatic collect state of a store\n\nIf you want automatic collect state which you used in current component, you can use another api `createAutoStore` and `useAutoStore`, below is the demo:\n\n```javascript\nimport { memo } from \"react\";\nimport \"./App.css\";\nimport { createAutoStore, useAutoStore } from \"./use-atom-store\";\n\nlet testAutoStore = createAutoStore({ a: 1, b: 2, c: 3 });\n\nfunction App() {\n  let state = useAutoStore(testAutoStore);\n  console.log(\"render A/B/C\");\n\n  state.a;\n  state.b;\n  state.c;\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          state.a++;\n        }}\n      \u003e\n        parent\n      \u003c/button\u003e\n      \u003cA\u003e\u003c/A\u003e\n      \u003cB\u003e\u003c/B\u003e\n      \u003cC\u003e\u003c/C\u003e\n    \u003c/div\u003e\n  );\n}\n\nlet A = memo(function A() {\n  let state = useAutoStore(testAutoStore);\n  console.log(\"render A\");\n\n  return \u003cbutton onClick={() =\u003e testAutoStore.a++}\u003ea{state.a}\u003c/button\u003e;\n});\n\nlet B = memo(function B() {\n  let state = useAutoStore(testAutoStore);\n  console.log(\"render B\");\n\n  return \u003cbutton onClick={() =\u003e testAutoStore.b++}\u003eb{state.b}\u003c/button\u003e;\n});\n\nlet C = memo(function C() {\n  let state = useAutoStore(testAutoStore);\n  console.log(\"render C\");\n\n  if (state.c \u003e 5 \u0026\u0026 state.c \u003c 10)\n    return \u003cbutton onClick={() =\u003e testAutoStore.c--}\u003ec{state.c}\u003c/button\u003e;\n\n  return \u003cbutton onClick={() =\u003e testAutoStore.c++}\u003ec{state.c}\u003c/button\u003e;\n});\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzengxiaoluan%2Fuse-atom-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzengxiaoluan%2Fuse-atom-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzengxiaoluan%2Fuse-atom-store/lists"}