archive-gh-me/zustand
1
0
Fork 0
mirror of https://github.com/pmndrs/zustand.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

fix(docs): add a note for TS users and update links to docs (#1097)

Browse Source 
* fix(docs): add a note for TS users and update links to docs

* keep "wiki page"
This commit is contained in:
Daishi Kato 2022-07-18 18:22:14 +09:00 committed by GitHub
parent 15ff6623c0
commit 8284334aa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/event-handler-in-pre-react-18.md Normal file
View File

@ -0,0 +1,21 @@
# Calling actions outside a React event handler in pre React 18
Because React handles `setState` synchronously if it's called outside an event handler. Updating the state outside an event handler will force react to update the components synchronously, therefore adding the risk of encountering the zombie-child effect.
In order to fix this, the action needs to be wrapped in `unstable_batchedUpdates`
```jsx
import { unstable_batchedUpdates } from 'react-dom' // or 'react-native'
const useStore = create((set) => ({
fishes: 0,
increaseFishes: () => set((prev) => ({ fishes: prev.fishes + 1 })),
}))
const nonReactCallback = () => {
unstable_batchedUpdates(() => {
useStore.getState().increaseFishes()
})
}
```
More details: https://github.com/pmndrs/zustand/issues/302

41
readme.md
View File

@ -18,6 +18,8 @@ You can try a live demo [here](https://githubbox.com/pmndrs/zustand/tree/main/ex
npm install zustand # or yarn add zustand npm install zustand # or yarn add zustand
``` ```
:warning: This readme is written for JavaScript users. If you are TypeScript users, don't miss [TypeScript Usage](#typescript-usage).
## First create a store ## First create a store
Your store is a hook! You can put anything in it: primitives, objects, functions. The `set` function _merges_ state. Your store is a hook! You can put anything in it: primitives, objects, functions. The `set` function _merges_ state.
@ -566,43 +568,14 @@ const useStore = create<BearState>()(
) )
``` ```
A more complete TypeScript guide is [here](https://github.com/pmndrs/zustand/blob/main/docs/typescript.md). A more complete TypeScript guide is [here](docs/typescript.md).
## Best practices ## Best practices
- You may wonder how to organize your code for better maintenance: [Splitting the store into separate slices](https://github.com/pmndrs/zustand/wiki/Splitting-the-store-into-separate-slices). - You may wonder how to organize your code for better maintenance: [Splitting the store into separate slices](docs/typescript.md#slices-pattern).
- Recommended usage for this unopinionated library: [Flux inspired practice](https://github.com/pmndrs/zustand/wiki/Flux-inspired-practice). - Recommended usage for this unopinionated library: [Flux inspired practice](docs/flux-inspired-practice.md).
- [Calling actions outside a React event handler in pre React 18](docs/event-handler-in-pre-react-18.md).
<details> - Testing: [Wiki page](https://github.com/pmndrs/zustand/wiki/Testing).
<summary>Calling actions outside a React event handler in pre React 18</summary>
<br/>
Because React handles `setState` synchronously if it's called outside an event handler. Updating the state outside an event handler will force react to update the components synchronously, therefore adding the risk of encountering the zombie-child effect.
In order to fix this, the action needs to be wrapped in `unstable_batchedUpdates`
```jsx
import { unstable_batchedUpdates } from 'react-dom' // or 'react-native'
const useStore = create((set) => ({
fishes: 0,
increaseFishes: () => set((prev) => ({ fishes: prev.fishes + 1 })),
}))
const nonReactCallback = () => {
unstable_batchedUpdates(() => {
useStore.getState().increaseFishes()
})
}
```
More details: https://github.com/pmndrs/zustand/issues/302
</details>
## Testing
For information regarding testing with Zustand, visit the dedicated [Wiki page](https://github.com/pmndrs/zustand/wiki/Testing).
## 3rd-Party Libraries ## 3rd-Party Libraries