{"id":13676725,"url":"https://github.com/reusablejs/reusable","last_synced_at":"2025-04-29T07:33:16.933Z","repository":{"id":45075851,"uuid":"165525059","full_name":"reusablejs/reusable","owner":"reusablejs","description":"Simplest way to manage global state in React","archived":false,"fork":false,"pushed_at":"2024-04-02T10:57:40.000Z","size":2687,"stargazers_count":236,"open_issues_count":32,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-19T15:21:32.418Z","etag":null,"topics":["hooks","hooks-api-react","javascript","javascript-library","react","react-native","reactjs","state-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/reusablejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-01-13T16:01:44.000Z","updated_at":"2025-01-11T12:27:18.000Z","dependencies_parsed_at":"2024-06-18T15:52:23.844Z","dependency_job_id":null,"html_url":"https://github.com/reusablejs/reusable","commit_stats":{"total_commits":216,"total_committers":7,"mean_commits":"30.857142857142858","dds":"0.31018518518518523","last_synced_commit":"0c24767dba77d445beb106f505ae1b631c0201ff"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reusablejs%2Freusable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reusablejs%2Freusable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reusablejs%2Freusable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reusablejs%2Freusable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reusablejs","download_url":"https://codeload.github.com/reusablejs/reusable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251456058,"owners_count":21592285,"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":["hooks","hooks-api-react","javascript","javascript-library","react","react-native","reactjs","state-management"],"created_at":"2024-08-02T13:00:31.819Z","updated_at":"2025-04-29T07:33:11.917Z","avatar_url":"https://github.com/reusablejs.png","language":"JavaScript","readme":"[![Build Status](https://circleci.com/gh/reusablejs/reusable.svg?style=svg)](https://circleci.com/gh/reusablejs/reusable)\n[![npm version](https://badge.fury.io/js/reusable.svg)](https://badge.fury.io/js/reusable)\n\n# Reusable - state management with hooks\n\u003cimg src=\"https://github.com/reusablejs/reusable/blob/master/website/static/img/reusable.png?raw=true\" width=\"120\"/\u003e\n\n- Use hooks to manage the store\n  - One paradigm for both local and shared state, and an easier transition between the two\n- Use a single context provider and avoid nesting dozens of providers\n- Allow direct subscriptions with selectors for better re-render control\n\n\n# How to use\nPass a custom hook to `createStore`:\n\n```javascript\nconst useCounter = createStore(() =\u003e {\n  const [counter, setCounter] = useState(0);\n  useEffect(...)\n  const isOdd = useMemo(...);\n\n  return {\n    counter,\n    isOdd,\n    increment: () =\u003e setCounter(prev =\u003e prev + 1)\n    decrement: () =\u003e setCounter(prev =\u003e prev - 1)\n  }\n});\n```\n\nand get a singleton store, with a hook that subscribes directly to that store:\n```javascript\nconst MyComponent = () =\u003e {\n  const {counter, increment, decrement} = useCounter();\n}\n\nconst AnotherComponent = () =\u003e {\n  const {counter, increment, decrement} = useCounter(); // same counter\n}\n```\n\nthen wrap your app with a provider:\n```javascript\nconst App = () =\u003e (\n  \u003cReusableProvider\u003e\n    ...\n  \u003c/ReusableProvider\u003e\n)\n```\n\nNote there is no need to provide the store. Stores automatically plug into the top provider\n\n## Selectors\nFor better control over re-renders, use selectors:\n\n```javascript\nconst Comp1 = () =\u003e {\n  const isOdd = useCounter(state =\u003e state.isOdd);\n}\n```\nComp1 will only re-render if counter switches between odd and even\n\nuseCounter can take a second parameter that will override the comparison function (defaults to shallow compare): \n```javascript\nconst Comp1 = () =\u003e {\n  const counter = useCounter(state =\u003e state, (prevValue, newValue) =\u003e prevValue === newValue);\n}\n```\n\n\n## Using stores from other stores\nEach store can use any other store similar to how components use them:\n```javascript\nconst useCurrentUser = createStore(() =\u003e ...);\nconst usePosts = createStore(() =\u003e ...);\n\nconst useCurrentUserPosts = createStore(() =\u003e {\n  const currentUser = useCurrentUser();\n  const posts = usePosts();\n  \n  return ...\n});\n```\n\n# Demos\n**basic**  \n\u003ca target=\"blank\" href=\"https://codesandbox.io/s/github/reusablejs/reusable/tree/master/examples/basic?fontsize=14\u0026module=%2Fsrc%2Findex.js\"\u003e\n  \u003cimg alt=\"Edit basic\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n\u003c/a\u003e\n\n**TodoMVC**  \n\n\u003ca target=\"blank\" href=\"https://codesandbox.io/s/github/reusablejs/reusable/tree/master/examples/todomvc?fontsize=14\u0026module=%2Fsrc%2Findex.js\"\u003e\n  \u003cimg alt=\"Edit basic\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n\u003c/a\u003e\n\n# How does this compare to other state management solutions?\nCurrent state management solutions don't let you manage state using hooks, which causes you to manage local and global state differently, and have a costly transition between the two.\n\nReusable solves this by seemingly transforming your custom hooks into global stores.\n\n## What about hooks+Context?\nUsing plain context has some drawbacks and limitations, that led us to write this library:\n- Context doesn't support selectors, render bailout, or debouncing\n- When managing global state using Context in a large app, you will probably have many small, single-purpose providers. Soon enough you'll find a Provider wrapper hell.\n- When you order the providers vertically, you can’t dynamically choose to depend on each other without changing the order, which might break things.\n\n# How does it work\nReact hooks must run inside a component, and our store is based on a custom hook.  \nSo in order to have a store that uses a custom hook, we need to create a \"host component\" for each of our stores.  \nThe `ReusableProvider` component renders a `Stores` component, under which it will render one \"host component\" per store, which only runs the store's hook, and renders nothing to the DOM. Then, it uses an effect to update all subscribers with the new value. \nWe use plain pubsub stores under the hood, and do shallowCompare on selector values to decide if we re-render the subscribing component or not.\n\nNotice that the `ReusableProvider` uses a Context provider at the top-level, but it provides a stable ref that never changes. This means that changing store values, and even dynamically adding stores won't re-render your app.\n\n## Feedback / Contributing:\nWe would love your feedback / suggestions\nPlease open an issue for discussion before submitting a PR\nThanks\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freusablejs%2Freusable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freusablejs%2Freusable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freusablejs%2Freusable/lists"}