{"id":21850385,"url":"https://github.com/mutativejs/jotai-mutative","last_synced_at":"2025-04-14T14:56:09.244Z","repository":{"id":257525446,"uuid":"857466191","full_name":"mutativejs/jotai-mutative","owner":"mutativejs","description":"A Mutative extension for Jotai","archived":false,"fork":false,"pushed_at":"2024-12-11T14:57:26.000Z","size":595,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T22:03:58.461Z","etag":null,"topics":["immutability","jotai","mutative","react"],"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":"2024-09-14T18:25:00.000Z","updated_at":"2025-01-02T12:04:11.000Z","dependencies_parsed_at":"2024-09-17T07:43:19.319Z","dependency_job_id":"2112766f-c3b1-4d53-a533-0eb769d945f4","html_url":"https://github.com/mutativejs/jotai-mutative","commit_stats":null,"previous_names":["mutativejs/jotai-mutative"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fjotai-mutative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fjotai-mutative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fjotai-mutative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutativejs%2Fjotai-mutative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mutativejs","download_url":"https://codeload.github.com/mutativejs/jotai-mutative/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248902004,"owners_count":21180549,"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","jotai","mutative","react"],"created_at":"2024-11-28T00:17:18.492Z","updated_at":"2025-04-14T14:56:09.222Z","avatar_url":"https://github.com/mutativejs.png","language":"TypeScript","readme":"# jotai-mutative\n\n![Node CI](https://github.com/mutativejs/jotai-mutative/workflows/Node%20CI/badge.svg)\n[![npm](https://img.shields.io/npm/v/jotai-mutative.svg)](https://www.npmjs.com/package/jotai-mutative)\n![license](https://img.shields.io/npm/l/jotai-mutative)\n\nA [Mutative](https://github.com/unadlib/mutative) extension for Jotai\n\nWith the Mutative extension, you can simplify the handling of immutable data in Jotai in a mutable way, allowing you to use immutable state more conveniently.\n\n`jotai-mutative` is more than 10x faster than `jotai-immer`. [Read more about the performance comparison in Mutative](https://mutative.js.org/docs/getting-started/performance).\n\n## Installation\n\nIn order to use the Mutative extension in Jotai, you will need to install Mutative and Jotai as a direct dependency.\n\n```bash\nnpm install jotai mutative jotai-mutative\n# Or use any package manager of your choice.\n```\n\n## Usage\n\n### atomWithMutative\n\n`atomWithMutative` creates a new atom similar to the regular atom with a different `writeFunction`. In this bundle, we don't have read-only atoms, because the point of these functions is the mutative create(mutability) function. The signature of writeFunction is `(get, set, update: (draft: Draft\u003cValue\u003e) =\u003e void) =\u003e void`.\n\n```tsx\nimport { useAtom } from 'jotai';\nimport { atomWithMutative } from 'jotai-mutative';\n\nconst countAtom = atomWithMutative({ value: 0 });\n\nconst Counter = () =\u003e {\n  const [count] = useAtom(countAtom);\n  return \u003cdiv\u003ecount: {count.value}\u003c/div\u003e;\n};\n\nconst Controls = () =\u003e {\n  const [, setCount] = useAtom(countAtom);\n  // setCount === update : (draft: Draft\u003cValue\u003e) =\u003e void\n  const inc = () =\u003e\n    setCount((draft) =\u003e {\n      ++draft.value;\n    });\n  return \u003cbutton onClick={inc}\u003e+1\u003c/button\u003e;\n};\n```\n\n### withMutative\n\n`withMutative` takes an atom and returns a derived atom, same as `atomWithMutative` it has a different `writeFunction`.\n\n```tsx\nimport { useAtom, atom } from 'jotai';\nimport { withMutative } from 'jotai-mutative';\n\nconst primitiveAtom = atom({ value: 0 });\nconst countAtom = withMutative(primitiveAtom);\n\nconst Counter = () =\u003e {\n  const [count] = useAtom(countAtom);\n  return \u003cdiv\u003ecount: {count.value}\u003c/div\u003e;\n};\n\nconst Controls = () =\u003e {\n  const [, setCount] = useAtom(countAtom);\n  // setCount === update : (draft: Draft\u003cValue\u003e) =\u003e void\n  const inc = () =\u003e\n    setCount((draft) =\u003e {\n      ++draft.value;\n    });\n  return \u003cbutton onClick={inc}\u003e+1\u003c/button\u003e;\n};\n```\n\n### useMutativeAtom\n\nThis hook takes an atom and replaces the atom's `writeFunction` with the new mutative-like `writeFunction` like the previous helpers.\n\n```tsx\nimport { useAtom } from 'jotai';\nimport { useMutativeAtom } from 'jotai-mutative';\n\nconst primitiveAtom = atom({ value: 0 });\n\nconst Counter = () =\u003e {\n  const [count] = useMutativeAtom(primitiveAtom);\n  return \u003cdiv\u003ecount: {count.value}\u003c/div\u003e;\n};\n\nconst Controls = () =\u003e {\n  const [, setCount] = useMutativeAtom(primitiveAtom);\n  // setCount === update : (draft: Draft\u003cValue\u003e) =\u003e void\n  const inc = () =\u003e\n    setCount((draft) =\u003e {\n      ++draft.value;\n    });\n  return \u003cbutton onClick={inc}\u003e+1\u003c/button\u003e;\n};\n```\n\n\u003e It would be better if you don't use `withMutative` and `atomWithMutative` with `useMutativeAtom` because they provide the mutative-like `writeFunction` and we don't need to create a new one.\n\u003e You can use `useSetMutativeAtom` if you need only the setter part of `useMutativeAtom`.\n\n### Mutative Options\n\n- [Strict mode](https://mutative.js.org/docs/advanced-guides/strict-mode)\n- [Auto Freeze](https://mutative.js.org/docs/advanced-guides/auto-freeze)\n- [Marking data structure](https://mutative.js.org/docs/advanced-guides/mark)\n\n## Credits\n\n`jotai-mutative` is inspired by `jotai-immer`.\n\nIt uses the same API as `jotai-immer` but uses Mutative under the hood. The repository is based on the `jotai-immer` repository.\n\n## License\n\n`jotai-mutative` is [MIT licensed](https://github.com/mutativejs/jotai-mutative/blob/main/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutativejs%2Fjotai-mutative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmutativejs%2Fjotai-mutative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutativejs%2Fjotai-mutative/lists"}