{"id":21029420,"url":"https://github.com/animify/userestate","last_synced_at":"2026-03-04T15:32:06.481Z","repository":{"id":57388332,"uuid":"159974970","full_name":"animify/useRestate","owner":"animify","description":"⚡️ React Hook that subscribes your state selector to the store.","archived":false,"fork":false,"pushed_at":"2018-12-04T20:44:31.000Z","size":311,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-12T21:48:36.694Z","etag":null,"topics":["action","react","react-hooks","redux","restate","store"],"latest_commit_sha":null,"homepage":"https://github.com/animify/useRestate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/animify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-01T18:30:27.000Z","updated_at":"2021-01-02T17:28:29.000Z","dependencies_parsed_at":"2022-09-09T16:01:22.806Z","dependency_job_id":null,"html_url":"https://github.com/animify/useRestate","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FuseRestate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FuseRestate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FuseRestate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FuseRestate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animify","download_url":"https://codeload.github.com/animify/useRestate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254330721,"owners_count":22053034,"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":["action","react","react-hooks","redux","restate","store"],"created_at":"2024-11-19T12:12:18.879Z","updated_at":"2026-03-04T15:32:06.439Z","avatar_url":"https://github.com/animify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useRestate ⚡️\n\n A React Hook that subscribes your state selector to the store and memoizes your action dispatchers.\n\n```js\nimport React from 'react';\nimport { useActions, useRestate } from 'use-restate';\n\nfunction Count() {\n    const { count } = useRestate(state =\u003e ({\n        count: state.count\n    }));\n\n    const { increment, decrement } = useActions({\n        increment: { type: 'INCREMENT' },\n        decrement: { type: 'DECREMENT' },\n    });\n\n    return (\n        \u003cdiv\u003e\n            \u003ch2\u003e{count}\u003c/h2\u003e\n            \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n            \u003cbutton onClick={decrement}\u003eDecrement\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n## Install\n\n```bash\n# Yarn\nyarn add use-restate\n\n# NPM\nnpm install use-restate\n```\n\n## Features\n\n- Feather light\n- Avoid needless re-renders\n- A familiar API\n- Works with any Redux-like store\n- Memoize single or multiple action dispatch functions\n- Quick access to store dispatch\n- Full Typescript support\n- Works without `react-redux`\n\n\n## Prerequisites\n\n⚠️ React hooks require `react` \u0026 `react-dom` at version 16.7.0-alpha.0 or higher.\n\n## Usage\n\nThe `use-restate` package requires you to provide your Redux-like store to `RestateProvider`.\n\n### Setting up the store\n\nBefore using the hook, your store should be passed to `RestateProvider`. You also have access to `RestateContext` should you need it to inject middleware.\n\n```js\nimport React from 'react';\nimport { createStore } from 'redux';\nimport { RestateProvider, RestateContext } from 'use-restate';\nimport combinedReducers from './reducers';\n\n...\n\nconst store = createStore(combinedReducers, { count: 3 });\n\nexport default function App() {\n    return (\n        \u003cRestateProvider value={store}\u003e\n            ...\n        \u003c/RestateProvider\u003e\n    );\n}\n```\n\n## API\n\n### `useRestate(mapState)`\n\nAutomatically subscribe your mapState selectors to the store so that each of them update on every change.\n\n```js\nimport React from 'react';\nimport { useRestate } from 'use-restate';\n\nexport default function Component() {\n    const { count } = useRestate(state =\u003e {\n        return { count: state.count };\n    });\n\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003e{count}\u003c/p\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n### `useAction(action)`\n\nWraps the action in a dispatcher and memoizes it so that it can be used freely in a React component. Internally uses `useCallback()` to memoize the dispatch function.\n\n```js\nimport React from 'react';\nimport { useAction } from 'use-restate';\n\nexport default function Component() {\n    const incrementAction = { type: 'INCREMENT' };\n    const increment = useAction(incrementAction);\n\n    return (\n        \u003cdiv\u003e\n            \u003ca onClick={increment}\u003eIncrement count\u003c/a\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n### `useActions(actionsMap)`\n\nWraps a map of actions in a dispatcher and memoizes each one with `useCallback`. Returns the same map with each key containing its paired action dispatcher.\n\n```js\nimport React from 'react';\nimport { useActions } from 'use-restate';\n\nexport default function Component() {\n    const { increment, decrement } = useActions({\n        increment: { type: 'INCREMENT' },\n        decrement: { type: 'DECREMENT' },\n    });\n\n    return (\n        \u003cdiv\u003e\n            \u003ca onClick={increment}\u003eIncrement count\u003c/a\u003e\n            \u003ca onClick={decrement}\u003eDecrement count\u003c/a\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n### `useDispatch()`\n\nReturns the `dispatch` method based on the store.\n\n```js\nimport React from 'react';\nimport { useDispatch } from 'use-restate';\n\nexport default function Component() {\n    const dispatch = useDispatch();\n\n    return (\n        \u003ca onClick={() =\u003e dispatch({ type: 'DECREMENT' })}\u003eDecrement count\u003c/a\u003e\n    );\n}\n```\n\n## Issues \u0026 suggestions\n\nIf you find any runtime issues or have any suggestions on how to improve the package please do open an ![issue](https://github.com/animify/useRestate/issues)!\n\n## License\n\n![MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2Fuserestate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimify%2Fuserestate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2Fuserestate/lists"}