{"id":13429598,"url":"https://github.com/immerjs/use-immer","last_synced_at":"2025-05-14T14:08:39.817Z","repository":{"id":38419188,"uuid":"154711754","full_name":"immerjs/use-immer","owner":"immerjs","description":"Use immer to drive state with a React hooks","archived":false,"fork":false,"pushed_at":"2024-12-17T11:16:07.000Z","size":604,"stargazers_count":4308,"open_issues_count":8,"forks_count":99,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-13T21:44:42.717Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/immerjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-10-25T17:32:07.000Z","updated_at":"2025-05-13T13:12:43.000Z","dependencies_parsed_at":"2024-05-03T10:00:18.223Z","dependency_job_id":"381b807b-dfad-4844-b575-806796697563","html_url":"https://github.com/immerjs/use-immer","commit_stats":{"total_commits":78,"total_committers":27,"mean_commits":2.888888888888889,"dds":0.6923076923076923,"last_synced_commit":"b07fdfcefccfc7ff4252d52d58493d443a63d4c2"},"previous_names":["mweststrate/use-immer"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immerjs%2Fuse-immer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immerjs%2Fuse-immer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immerjs%2Fuse-immer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immerjs%2Fuse-immer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/immerjs","download_url":"https://codeload.github.com/immerjs/use-immer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160431,"owners_count":22024568,"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":[],"created_at":"2024-07-31T02:00:42.298Z","updated_at":"2025-05-14T14:08:39.787Z","avatar_url":"https://github.com/immerjs.png","language":"TypeScript","readme":"# use-immer\n\nA hook to use [immer](https://github.com/mweststrate/immer) as a React [hook](https://reactjs.org/docs/hooks-intro.html) to manipulate state.\n\n# Installation\n\n`npm install immer use-immer`\n\n# API\n\n## useImmer\n\n`useImmer(initialState)` is very similar to [`useState`](https://reactjs.org/docs/hooks-state.html).\nThe function returns a tuple, the first value of the tuple is the current state, the second is the updater function,\nwhich accepts an [immer producer function](https://immerjs.github.io/immer/produce) or a value as argument.  \n\n### Managing state with immer producer function\n\nWhen passing a function to the updater, the `draft` argument can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.\n\nExample: https://codesandbox.io/s/l97yrzw8ol\n\n```javascript\nimport React from \"react\";\nimport { useImmer } from \"use-immer\";\n\n\nfunction App() {\n  const [person, updatePerson] = useImmer({\n    name: \"Michel\",\n    age: 33\n  });\n\n  function updateName(name) {\n    updatePerson(draft =\u003e {\n      draft.name = name;\n    });\n  }\n\n  function becomeOlder() {\n    updatePerson(draft =\u003e {\n      draft.age++;\n    });\n  }\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003e\n        Hello {person.name} ({person.age})\n      \u003c/h1\u003e\n      \u003cinput\n        onChange={e =\u003e {\n          updateName(e.target.value);\n        }}\n        value={person.name}\n      /\u003e\n      \u003cbr /\u003e\n      \u003cbutton onClick={becomeOlder}\u003eOlder\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n(obviously, immer is a little overkill for this example)\n\n### Managing state as simple useState hook\nWhen passing a value to the updater instead of a function, `useImmer` hook behaves the same as useState hook and updates the state with that value.\n\n```javascript\nimport React from 'react';\nimport { useImmer } from 'use-immer';\n\nfunction BirthDayCelebrator(){\n  const [age, setAge] = useImmer(20);\n\n  function birthDay(event){\n    setAge(age + 1);\n    alert(`Happy birthday #${age} Anon! hope you good`);\n  }\n\n  return(\n    \u003cdiv\u003e\n      \u003cbutton onClick={birthDay}\u003eIt is my birthday\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nObviously if you have to deal with immutability it is better option passing a function to the updater instead of a direct value.\n\n## useImmerReducer\n\nImmer powered reducer, based on [`useReducer` hook](https://reactjs.org/docs/hooks-reference.html#usereducer)\n\nExample: https://codesandbox.io/s/2zor1monvp\n\n```javascript\nimport React from \"react\";\nimport { useImmerReducer } from \"use-immer\";\n\nconst initialState = { count: 0 };\n\nfunction reducer(draft, action) {\n  switch (action.type) {\n    case \"reset\":\n      return initialState;\n    case \"increment\":\n      return void draft.count++;\n    case \"decrement\":\n      return void draft.count--;\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useImmerReducer(reducer, initialState);\n  return (\n    \u003c\u003e\n      Count: {state.count}\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"reset\" })}\u003eReset\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"increment\" })}\u003e+\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"decrement\" })}\u003e-\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n","funding_links":[],"categories":["Packages","TypeScript","目录","React","Hooks","Uncategorized","Framework agnostic packages"],"sub_categories":["🎃ClassName","Hook","Uncategorized","Immutable"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmerjs%2Fuse-immer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimmerjs%2Fuse-immer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmerjs%2Fuse-immer/lists"}