Deriving computed values from a Zustand store: this is how I roll

[rodrigocfd]

I'm doing some experiments to find out the best way to apply computed values in the Zustand programming model. So far, my cleanest solution is using a custom hook to derive values from the state, as shown below (TypeScript code):

import create from 'zustand';
import {combine} from 'zustand/middleware';

/**
 * The store, which holds the state and the actions.
 */
const useBearStore = create(
    combine({
        bears: 0,
    },
    (set, get) => ({
        increasePopulation(): void {
            set(state => ({ bears: state.bears + 1 }));
        },
        removeAllBears(): void {
            set({ bears: 0 });
        },
    })),
);

export default useBearStore;

/**
 * Custom hook that returns a computed value.
 */
export function useBearCountPlusOne(): number {
    const bears = useBearStore(s => s.bears);
    return bears + 1;
}

Usage example in a component:

import useBearStore, {useBearCountPlusOne} from './useBearStore';

function App() {
    const increasePopulation = useBearStore(s => s.increasePopulation);
    const populationPlusOne = useBearCountPlusOne();

    return <>
        <div>Population + 1: {populationPlusOne}</div>
        <button onClick={() => increasePopulation()}>
            Increase population
        </button>
    </>;
}

I'm wondering: is there a better approach to this situation?

Any gotchas?

[doliG]

Hey, I have similar question in #1384 and really like how you use hooks to solve this problem.

After doing some research I found zustand-middleware-computed-state (see #1363), that may help you

[rodrigocfd]

I'm using the approach I described above, with success.

[doliG]

You were wondering "is there a better approach to this situation ?", so I gave you one ^^

I also tried your approach and it's very convenient to use although it kind of break the "everything in the store" pattern.

[dai-shi]

Slightly related, I just made "derive-zustand": https://twitter.com/dai_shi/status/1589279106201718785