\n Hello, {firstName}!\n
\n![](\"./docs/bear.jpg\")
\n\n \n
\n ![](\"https://dai-shi.github.io/zustand-banner-sponsorship/api/banner.png\")
\n
![\"Logo](\"../../bear.jpg\")
\n\n Hello, {firstName}!\n
\n\n {person.firstName} {person.lastName} ({person.email})\n
\n \n )\n}\n```\n\nFor example, this line mutates the state from a past render:\n\n```tsx\nperson.firstName = e.target.value\n```\n\nThe reliable way to get the behavior you’re looking for is to create a new object and pass it to\n`setPerson`. But here you want to also copy the existing data into it because only one of the\nfields has changed:\n\n```ts\nsetPerson({ ...person, firstName: e.target.value }) // New first name from the input\n```\n\n> [!NOTE]\n> We don’t need to copy every property separately due to `set` function performing shallow merge by\n> default.\n\nNow the form works!\n\nNotice how you didn’t declare a separate state variable for each input field. For large forms,\nkeeping all data grouped in an object is very convenient—as long as you update it correctly!\n\n```tsx {32,36,40}\nimport { type ChangeEvent } from 'react'\nimport { createWithEqualityFn } from 'zustand/traditional'\nimport { shallow } from 'zustand/vanilla/shallow'\n\ntype PersonStoreState = {\n person: { firstName: string; lastName: string; email: string }\n}\n\ntype PersonStoreActions = {\n setPerson: (nextPerson: PersonStoreState['person']) => void\n}\n\ntype PersonStore = PersonStoreState & PersonStoreActions\n\nconst usePersonStore = createWithEqualityFn\n {person.firstName} {person.lastName} ({person.email})\n
\n \n )\n}\n```\n" }, { "path": "docs/reference/apis/create.md", "content": "---\ntitle: create\ndescription: How to create stores\ntag: react\nnav: 21\n---\n\n`create` lets you create a React Hook with API utilities attached.\n\n```js\nconst useSomeStore = create(stateCreatorFn)\n```\n\n- [Types](#types)\n - [Signature](#signature)\n- [Reference](#reference)\n- [Usage](#usage)\n - [Updating state based on previous state](#updating-state-based-on-previous-state)\n - [Updating Primitives in State](#updating-primitives-in-state)\n - [Updating Objects in State](#updating-objects-in-state)\n - [Updating Arrays in State](#updating-arrays-in-state)\n - [Updating state with no store actions](#updating-state-with-no-store-actions)\n - [Subscribing to state updates](#subscribing-to-state-updates)\n- [Troubleshooting](#troubleshooting)\n - [I’ve updated the state, but the screen doesn’t update](#i’ve-updated-the-state,-but-the-screen-doesn’t-update)\n\n## Types\n\n### Signature\n\n```ts\ncreate\n {person.firstName} {person.lastName} ({person.email})\n
\n \n )\n}\n```\n\nFor example, this line mutates the state from a past render:\n\n```tsx\nperson.firstName = e.target.value\n```\n\nThe reliable way to get the behavior you’re looking for is to create a new object and pass it to\n`setPerson`. But here you want to also copy the existing data into it because only one of the\nfields has changed:\n\n```ts\nsetPerson({ ...person, firstName: e.target.value }) // New first name from the input\n```\n\n> [!NOTE]\n> We don’t need to copy every property separately due to `set` function performing shallow merge by\n> default.\n\nNow the form works!\n\nNotice how you didn’t declare a separate state variable for each input field. For large forms,\nkeeping all data grouped in an object is very convenient—as long as you update it correctly!\n\n```tsx {27,31,35}\nimport { create } from 'zustand'\n\ntype PersonStoreState = {\n person: { firstName: string; lastName: string; email: string }\n}\n\ntype PersonStoreActions = {\n setPerson: (nextPerson: PersonStoreState['person']) => void\n}\n\ntype PersonStore = PersonStoreState & PersonStoreActions\n\nconst usePersonStore = create\n {person.firstName} {person.lastName} ({person.email})\n
\n \n )\n}\n```\n" }, { "path": "docs/reference/apis/shallow.md", "content": "---\ntitle: shallow\ndescription: How compare simple data effectively\nnav: 24\n---\n\n`shallow` lets you run fast checks on simple data structures. It effectively identifies changes in\n**top-level** properties when you're working with data structures that don't have nested objects or\narrays within them.\n\n> [!NOTE]\n> Shallow lets you perform quick comparisons, but keep its limitations in mind.\n\n```js\nconst equal = shallow(a, b)\n```\n\n- [Types](#types)\n - [Signature](#signature)\n- [Reference](#reference)\n- [Usage](#usage)\n - [Comparing Primitives](#comparing-primitives)\n - [Comparing Objects](#comparing-objects)\n - [Comparing Sets](#comparing-sets)\n - [Comparing Maps](#comparing-maps)\n- [Troubleshooting](#troubleshooting)\n - [Comparing objects returns `false` even if they are identical](#comparing-objects-returns-false-even-if-they-are-identical)\n - [Comparing objects with different prototypes](#comparing-objects-with-different-prototypes)\n\n## Types\n\n### Signature\n\n```ts\nshallow