Zustand Notes

Zustand is a state management tool for [[React]].~~Its official website is really nice~~

Zustand automatically merges state. However, nested objects require you to specify the merge behavior manually.¹

// These two statements are equivalent for simplicity's sake

set((state) => ({ count: state.count + 1 }))
set((state) => ({ ...state, count: state.count + 1 }))

// But for nested object, you have to merge them explicitly
const useCountStore = create((set) => ({
  nested: { count: 0 },
  inc: () =>
    set((state) => ({
      nested: { ...state.nested, count: state.nested.count + 1 },
    })),
}))

Zustand’s store is a hook. Its standard pattern is as follows.²

import create from 'zustand'

// First create a store
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// Then bind your components, and that's it!
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

Try to use atomic selectors, because whatever a selector returns triggers a component re-render, and Array and Object are always treated as new results.³

// Selector returns a new Object in every invocation
const { bears, fish } = useBearStore((state) => ({
  bears: state.bears,
  fish: state.fish,
}))

// So these two are equivalent..
const { bears, fish } = useBearStore()

// Prefer this!
export const useBears = () => useBearStore((state) => state.bears)
export const useFish = () => useBearStore((state) => state.fish)