Skip to content

Commit

Permalink
fix(docs): improve v5 migration guide (#2749)
Browse files Browse the repository at this point in the history
* fix(docs): improve v5 migration guide

* Update docs/migrations/migrating-to-v5.md

Co-authored-by: Blazej Sewera <code@sewera.dev>

---------

Co-authored-by: Blazej Sewera <code@sewera.dev>
  • Loading branch information
dai-shi and sewera authored Sep 21, 2024
1 parent 18c0a3d commit f82f56d
Showing 1 changed file with 24 additions and 3 deletions.
27 changes: 24 additions & 3 deletions docs/migrations/migrating-to-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,10 @@ For example, this may cause infinite loops.

```js
// v4
const action = useMainStore((state) => {
return state.action ?? () => {}
})
const [searchValue, setSearchValue] = useStore((state) => [
state.searchValue,
state.setSearchValue,
])
```

The error message will be something like this:
Expand All @@ -109,6 +110,26 @@ The error message will be something like this:
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
```

To fix it, use the `useShallow` hook, which will return a stable reference.

```js
// v5
import { useShallow } from 'zustand/shallow'

const [searchValue, setSearchValue] = useStore(
useShallow((state) => [state.searchValue, state.setSearchValue]),
)
```

Here's another example that may cause infinite loops.

```js
// v4
const action = useMainStore((state) => {
return state.action ?? () => {}
})
```
To fix it, make sure the selector function returns a stable reference.
```js
Expand Down

0 comments on commit f82f56d

Please sign in to comment.