{"id":15499,"library":"zustand-computed-state","title":"Zustand Computed State Middleware","description":"Zustand Computed State is a lightweight, TypeScript-friendly middleware designed for the Zustand state management library. It allows developers to define derived or 'computed' state values that automatically update whenever their base dependencies in the Zustand store change. This eliminates the need for manual re-computation of derived values, simplifying state logic and improving performance by only re-calculating when necessary. The current stable version is 0.2.0, indicating it's in an early but active development phase, with releases likely occurring as features stabilize. Its key differentiator is its straightforward integration into Zustand's middleware chain, providing a clear pattern for computed properties without introducing significant overhead or complex APIs, making it a good choice for applications already leveraging Zustand that require derived state.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/yasintz/zustand-computed-state","tags":["javascript","typescript"],"install":[{"cmd":"npm install zustand-computed-state","lang":"bash","label":"npm"},{"cmd":"yarn add zustand-computed-state","lang":"bash","label":"yarn"},{"cmd":"pnpm add zustand-computed-state","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a middleware for Zustand and requires a compatible version of Zustand to function.","package":"zustand","optional":false}],"imports":[{"note":"Primary middleware export for wrapping the Zustand store creator. The package primarily uses ESM.","wrong":"const { computed } = require('zustand-computed-state');","symbol":"computed","correct":"import { computed } from 'zustand-computed-state';"},{"note":"A utility function used inside the `computed` middleware to define the derived state. It's a named export, not a default.","wrong":"import compute from 'zustand-computed-state';","symbol":"compute","correct":"import { compute } from 'zustand-computed-state';"},{"note":"While not directly from `zustand-computed-state`, `StateCreator` from `zustand` is essential for type safety when using this middleware, especially with slice patterns or complex types.","symbol":"StateCreator","correct":"import { StateCreator } from 'zustand';"}],"quickstart":{"code":"import { create } from 'zustand';\nimport { computed, compute } from 'zustand-computed-state';\n\ntype Store = {\n  count: number;\n  inc: () => void;\n  dec: () => void;\n  countSq: number; // Computed state\n};\n\nconst useStore = create<Store>()(\n  computed((set, get) => ({\n    count: 1,\n    inc: () => set(state => ({ count: state.count + 1 })),\n    dec: () => set(state => ({ count: state.count - 1 })),\n    // Example: get() can access computed states\n    square: () => set(() => ({ count: get().countSq })), \n    root: () => set(state => ({ count: Math.floor(Math.sqrt(state.count)) })),\n\n    // Define computed state 'countSq' based on 'count'\n    ...compute(get, state => ({\n      countSq: state.count ** 2,\n    })),\n  }))\n);\n\n// Usage in a component (example, not runnable here)\n/*\nfunction Counter() {\n  const { count, countSq, inc, dec } = useStore();\n  return (\n    <div>\n      <span>Count: {count}</span><br />\n      <span>Count Squared: {countSq}</span><br />\n      <button onClick={inc}>+1</button>\n      <button onClick={dec}>-1</button>\n    </div>\n  );\n}\n*/\nconsole.log('Initial state:', useStore.getState());\nuseStore.getState().inc();\nconsole.log('After increment:', useStore.getState());","lang":"typescript","description":"Demonstrates defining a Zustand store with the `zustand-computed-state` middleware to create a `countSq` derived property from `count`, showing both its definition and how it's accessed."},"warnings":[{"fix":"For slice patterns, use `...compute('my_slice_id', get, state => ({...}))`.","message":"When using `compute` with multiple slices, ensure you provide a unique identifier string as the first argument to `compute` to correctly separate computed states for each slice. Failure to do so might lead to computed state conflicts or incorrect updates between slices.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure the order of `compute` definitions if one computed property relies on another. For properties within the same `compute` block, dependencies are typically handled correctly.","message":"The `get()` function *inside* the `computed` middleware's state creator has access to the *currently evaluated* computed states. This means computed properties can depend on other computed properties defined within the same `compute` block, but careful structuring is needed for dependencies across different `compute` calls or outside the middleware.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always check the `zustand-computed-state` release notes and peer dependency requirements when upgrading `zustand` to a new major version.","message":"The package currently targets `zustand` v5.0.8 via peer dependencies. Future major versions of `zustand` might introduce breaking changes that could affect the compatibility of this middleware, requiring an update to `zustand-computed-state`.","severity":"breaking","affected_versions":"<=0.2.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import { create } from 'zustand';` is present at the top of your file.","cause":"Attempting to use `create` without importing it from `zustand`.","error":"TypeError: create is not a function"},{"fix":"Manually add the computed properties and their types to your `StoreType` interface or type alias. For example, `type Store = { count: number; countSq: number; };`","cause":"The TypeScript type for your store (`StoreType`) has not been updated to include the newly defined computed properties.","error":"Property 'computedProperty' does not exist on type 'StoreType'"}],"ecosystem":"npm"}