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): comparison (#1284)

Browse Source 
* Adding improvements to comparison docs

* Rewording

* Update docs/getting-started/comparison.md

Co-authored-by: Bjorn Stromberg <bjorn@bjornstar.com>

* Update comparison.md

Co-authored-by: Bjorn Stromberg <bjorn@bjornstar.com>
This commit is contained in:
Danilo Britto 2022-09-19 20:58:03 -05:00 committed by GitHub
parent 4ed81bc11b
commit 981fe92349
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/getting-started/comparison.md
View File

@ -228,7 +228,11 @@ the immutable state model, while Valtio is based on the mutable state model.
```ts
import create from 'zustand'
const store = create(() => ({ obj: { count: 0 } }))
type State = {
obj: { count: number }
}
const store = create<State>(() => ({ obj: { count: 0 } }))
store.setState((prev) => ({ obj: { count: prev.obj.count + 1 } })
```
@ -244,13 +248,17 @@ state.obj.count += 1
### Render Optimization
The other difference between Zustand and Valtio is Valtio makes render
optimizations through property access. While Zustand it is recommended that you
manually apply render optimizations by using selectors.
optimizations through property access. However, with Zustand it is recommended
that you manually apply render optimizations by using selectors.
```ts
import create from 'zustand'
const useCountStore = create(() => ({
type State = {
count: number
}
const useCountStore = create<State>(() => ({
count: 0,
}))
@ -290,9 +298,15 @@ type State = {
count: number
}
const useCountStore = create<State>((set) => ({
type Actions = {
updateCount: (
countCallback: (count: State['count']) => State['count']
) => void
}
const useCountStore = create<State & Actions>((set) => ({
count: 0,
updateCount: (countCallback: (count: State['count']) => State['count']) =>
updateCount: (countCallback) =>
set((state) => ({ count: countCallback(state.count) })),
}))
```
@ -306,8 +320,8 @@ const countAtom = atom<number>(0)
### Render Optimization
The other difference between Zustand and Jotai is: Jotai makes render
optimizations through atom dependency. But, with Zustand you need to do manual
render optimizations through selectors.
optimizations through atom dependency. However, with Zustand it is recommended that you
manually apply render optimizations by using selectors.
```ts
import create from 'zustand'
@ -316,9 +330,15 @@ type State = {
count: number
}
const useCountStore = create<State>((set) => ({
type Actions = {
updateCount: (
countCallback: (count: State['count']) => State['count']
) => void
}
const useCountStore = create<State & Actions>((set) => ({
count: 0,
updateCount: (countCallback: (count: State['count']) => State['count']) =>
updateCount: (countCallback) =>
set((state) => ({ count: countCallback(state.count) })),
}))
@ -355,9 +375,13 @@ type State = {
count: number
}
const useCountStore = create<State>((set) => ({
type Actions = {
setCount: (countCallback: (count: State['count']) => State['count']) => void
}
const useCountStore = create<State & Actions>((set) => ({
count: 0,
setCount: (countCallback: (count: State['count']) => State['count']) =>
setCount: (countCallback) =>
set((state) => ({ count: countCallback(state.count) })),
}))
```
@ -374,8 +398,8 @@ const count = atom({
### Render Optimization
The other difference between Zustand and Recoil is: Recoil makes render
optimizations through atom dependency. But, with Zustand you need to do manual
render optimizations through selectors.
optimizations through atom dependency. However, with Zustand it is recommended that you
manually apply render optimizations by using selectors.
```ts
import create from 'zustand'
@ -384,9 +408,13 @@ type State = {
count: number
}
const useCountStore = create<State>((set) => ({
type Actions = {
setCount: (countCallback: (count: State['count']) => State['count']) => void
}
const useCountStore = create<State & Actions>((set) => ({
count: 0,
setCount: (countCallback: (count: State['count']) => State['count']) =>
setCount: (countCallback) =>
set((state) => ({ count: countCallback(state.count) })),
}))