{"id":21850388,"url":"https://github.com/mutativejs/use-mutative","last_synced_at":"2025-04-04T16:12:16.832Z","repository":{"id":65378503,"uuid":"559170759","full_name":"mutativejs/use-mutative","owner":"mutativejs","description":"A 2-6x faster alternative to useState with spread operation.","archived":false,"fork":false,"pushed_at":"2025-02-16T02:10:31.000Z","size":1133,"stargazers_count":70,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T15:05:13.423Z","etag":null,"topics":["immutability","immutable","mutative","react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/mutativejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-10-29T09:24:38.000Z","updated_at":"2025-02-16T02:08:10.000Z","dependencies_parsed_at":"2024-01-06T16:36:43.159Z","dependency_job_id":"87d958b9-6811-4ccb-8756-ff0072815d77","html_url":"https://github.com/mutativejs/use-mutative","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":"0.021276595744680882","last_synced_commit":"fc144cf4da7036295b5d9af54483ab5613475677"},"previous_names":["mutativejs/use-mutative"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fuse-mutative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fuse-mutative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fuse-mutative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fuse-mutative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mutativejs","download_url":"https://codeload.github.com/mutativejs/use-mutative/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208142,"owners_count":20901570,"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":["immutability","immutable","mutative","react","react-hooks"],"created_at":"2024-11-28T00:17:19.264Z","updated_at":"2025-04-04T16:12:16.803Z","avatar_url":"https://github.com/mutativejs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-mutative\n\n![Node CI](https://github.com/mutativejs/use-mutative/workflows/Node%20CI/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/mutativejs/use-mutative/badge.svg?branch=main)](https://coveralls.io/github/mutativejs/use-mutative?branch=main)\n[![npm](https://img.shields.io/npm/v/use-mutative.svg)](https://www.npmjs.com/package/use-mutative)\n![license](https://img.shields.io/npm/l/use-mutative)\n\nA hook to use [Mutative](https://github.com/unadlib/mutative) as a React hook to efficient update react state immutable with mutable way.\n\n`use-mutative` is 2-6x faster than `useState()` with spread operation, more than 10x faster than `useImmer()`. [Read more about the performance comparison in Mutative](https://mutative.js.org/docs/getting-started/performance).\n\n## Installation\n\nYarn\n\n```bash\nyarn add mutative use-mutative\n```\n\nNPM\n\n```bash\nnpm install mutative use-mutative\n```\n\n## API\n\n### useMutative()\n\nProvide you can create immutable state easily with mutable way.\n\n```tsx\nimport { useMutative } from 'use-mutative';\n\nexport function App() {\n  const [todos, setTodos] = useMutative([{ text: 'todo' }]);\n  return (\n    \u003c\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          // set todos with draft mutable\n          setTodos((draft) =\u003e {\n            draft.push({ text: 'todo 2' });\n          });\n        }}\n      \u003e\n        click\n      \u003c/button\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          // also can override value directly\n          setTodos([{ text: 'todo' }, { text: 'todo 2' }]);\n        }}\n      \u003e\n        click\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### useMutativeReducer()\n\nProvide you can create immutable state easily with mutable way in reducer way.\n\n\u003e For return values that do not contain any drafts, you can use `rawReturn()` to wrap this return value to improve performance. It ensure that the return value is only returned explicitly.\n\n```tsx\nimport { rawReturn } from 'mutative';\nimport { useMutativeReducer } from 'use-mutative';\n\nconst initialState = {\n  count: 0,\n};\n\nfunction reducer(\n  draft: Draft\u003ctypeof initialState\u003e,\n  action: { type: 'reset' | 'increment' | 'decrement' }\n) {\n  switch (action.type) {\n    case 'reset':\n      return rawReturn(initialState);\n    case 'increment':\n      return void draft.count++;\n    case 'decrement':\n      return void draft.count--;\n  }\n}\n\nexport function App() {\n  const [state, dispatch] = useMutativeReducer(reducer, initialState);\n\n  return (\n    \u003cdiv\u003e\n      Count: {state.count}\n      \u003cbr /\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'increment' })}\u003eIncrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'decrement' })}\u003eDecrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'reset' })}\u003eReset\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nMore detail about `use-mutative` can be found in [API docs](https://github.com/mutativejs/use-mutative/blob/main/docs/modules.md)\n\n### Patches\n\nIn some cases, you may want to get that patches from your update, we can pass `{ enablePatches: true }` options in `useMutative()` or `useMutativeReducer()`, that can provide you the ability to get that patches from pervious action.\n\n```tsx\nconst [state, updateState, patches, inversePatches] = useMutative(initState, {\n  enablePatches: true,\n});\n\nconst [state, dispatch, patches, inversePatches] = useMutativeReducer(\n  reducer,\n  initState,\n  initializer,\n  { enablePatches: true }\n);\n```\n\npatches format will follow https://jsonpatch.com/, but the `\"path\"` field be array structure.\n\n## License\n\n`use-mutative` is [MIT licensed](https://github.com/mutativejs/use-mutative/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutativejs%2Fuse-mutative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmutativejs%2Fuse-mutative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutativejs%2Fuse-mutative/lists"}