Functional updates in Zustand?

[heymartinadams]

Is this not possible in Zustand: setMyCustomStateSetter(prev => ...)? prev doesn’t seem to be the previous state.

[dbritto-dev]

@heymartinadams would you mind sharing us a minimal code/demo on stackblitz?

[heymartinadams]

Pretty busy for this week, will do it if you still need me to. In the meantime, here’s how functional updates are used in React. If I try to do the same in Zustand, prev doesn’t log as 0, but instead as a function:

import * as React from 'react'

const [state, setState] = React.useState(0)

return (
  <button onClick={() => setState(prev => prev + 1)}>
    Click to increase
  </button>
)

[heymartinadams]

I think I figured it out. Can you please look it over and let me know if I’m making an error here @dbritto-dev?

Here’s the store I previously had:

Previous Store

export const useApplesStore = create(set => ({
  apples: 0,
  setApples: value => set({ apples: value })
})

On the Zustand GitHub page there wasn’t an example (as far as I could tell) where we passed in a custom value (e.g. add 24 apples). Instead, the GitHub page shows examples for specific setters (increasePopulation increases population only by 1, ever).

My goal, here, is to create a setter function where I can pass custom values in also based on its previous value. For example, add 24 apples to my existing apple cart, so prev + 24.

File

const { setApples } = useApplesStore(state => ({ setApples: state.setApples }))

setApples(prev => prev + 24) // ← using the previous store, this doesn’t work
// since `prev` is a function, not the previous value

When I refactored the store below, I got it to work:

New Store

export const useApplesStore = create(set => ({
  apples: 0,
  setApples: value => set(state => ({ apples: typeof value === 'function' ? value(state.apples) : value }))
})

File

const { setApples } = useApplesStore(state => ({ setApples: state.setApples }))

setApples(prev => prev + 24) // ← using the new store, this works.

[kevinsbk]

Thanks for updating this, I ran into a similar issue.

Essentially, when updating state based on its previous value in Zustand, we need to directly define the update logic using the set function inside the store. Zustand doesn't automatically support the functional state update pattern like React's useState.

In React, state setters can accept either a new value or a function that takes the previous state as input, allowing for functional updates. However, in Zustand, we handle this differently by directly mutating the state within the store's set function.

Please let me know if there are issues with this understanding.

[dbritto-dev]

@kevinsbk setState/set functions works same as setState functions in React, so you can use a callback or a value whatever you want. BTW, we added new docs about apis, hooks, and middlewares

[kevinsbk]

@dbritto-dev I see, thanks for the correction. It's not that we can't pass in a function, but rather, we need to define the setter to behave differently depending on whether the input is a function.

From this:

setApples: value => set({ apples: value })

to this:

setApples: value => set(state => ({ apples: typeof value === 'function' ? value(state.apples) : value }))

Can be tricky to debug if you accidentally pass in a function in to a non-functional state setter without typing. Is this the common practice to overload the setter with either the value itself or the function that sets the value?

[dbritto-dev]

@kevinsbk it's we use it on React a lot