zustand-computed

import { create } from 'zustand' import { createComputed } from 'zustand-computed' type Store = { count: number inc: () => void dec: () => void } type ComputedStore = { countSq: number } const computed = createComputed((state: Store): ComputedStore => ({ countSq: state.count ** 2, })) // To integrate with other middleware like devtools or immer, wrap them around computed // For example: create<Store>()(devtools(computed(...))) or create<Store>()(immer(computed(...))) const useStore = create<Store>()( computed( (set, get) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })), dec: () => set((state) => ({ count: state.count - 1 })), // get() function inside the store definition has access to both base and computed state square: () => set(() => ({ count: get().countSq })), root: () => set((state) => ({ count: Math.floor(Math.sqrt(state.count)) })), }) ) ) // Example usage (e.g., in a React component) function Counter() { const { count, countSq, inc, dec } = useStore() return ( <div> <span>Count: {count}</span> <br /> <span>Count Squared: {countSq}</span> <br /> <button onClick={inc}>+1</button> <button onClick={dec}>-1</button> </div> ) } // To demonstrate outside React, for example in Node.js: const unsubscribe = useStore.subscribe((state) => { console.log('Current state:', state.count, 'Computed:', state.countSq); }); useStore.getState().inc(); // Increment count, triggering recomputation useStore.getState().inc(); unsubscribe();