{"id":17125,"library":"zustand-middleware-computed-state","title":"Zustand Computed State Middleware","description":"Zustand Computed State Middleware is a lightweight utility designed to seamlessly integrate derived or computed state into Zustand stores. It enables developers to define functions that calculate new state values based on the existing store state, automatically merging these computed values back into the primary store. This allows computed properties to be accessed directly alongside regular state, simplifying state management logic. The current stable version of this specific middleware is 0.1.3, representing an initial release focused on core functionality and ease of use. However, a different package with similar functionality, `zustand-computed`, is at version 2.1.1 and has seen more active development and breaking changes. As a middleware, its release cadence will likely follow its parent library, Zustand, or be driven by feature enhancements and bug fixes. A key differentiator is its 'dead simple' approach, providing direct state augmentation without the need for manual selectors in many cases, though it explicitly advises keeping computed functions light due to their re-evaluation on every state change to prevent performance bottlenecks. It ships with full TypeScript support, requiring explicit type definitions for robust usage.","status":"maintenance","version":"0.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/cmlarsen/zustand-middleware-computed-state","tags":["javascript","react","state","manager","management","redux","store","zustand","computed","typescript"],"install":[{"cmd":"npm install zustand-middleware-computed-state","lang":"bash","label":"npm"},{"cmd":"yarn add zustand-middleware-computed-state","lang":"bash","label":"yarn"},{"cmd":"pnpm add zustand-middleware-computed-state","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a middleware designed for Zustand stores, requiring Zustand's core functionality.","package":"zustand","optional":false}],"imports":[{"note":"This is the primary named export for the middleware. While CJS bundles may exist, the package primarily targets ESM environments.","wrong":"const { computed } = require('zustand-middleware-computed-state')","symbol":"computed","correct":"import { computed } from 'zustand-middleware-computed-state'"},{"note":"This is Zustand's core `create` function, essential for defining stores. Modern Zustand versions (v4+) typically use named imports for `create`, whereas older versions or some configurations might default import. Zustand v5 drops default exports.","wrong":"import create from 'zustand'","symbol":"create","correct":"import { create } from 'zustand'"},{"note":"When working with TypeScript and Zustand middleware, `StateCreator` is a commonly used type from Zustand itself to explicitly define the shape of your store's `set` and `get` functions and overall state, enhancing type safety.","wrong":"import { StateCreator } from 'zustand'","symbol":"StateCreator","correct":"import type { StateCreator } from 'zustand'"}],"quickstart":{"code":"import create from 'zustand';\nimport { computed } from 'zustand-middleware-computed-state';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst useStore = create(\n  computed(\n    (set) => ({\n      count: 0,\n      inc: () => set((state) => ({ count: state.count + 1 })),\n    }),\n    (state) => {\n      function isEnough() {\n        if (state.count > 100) {\n          return 'Is enough';\n        } else {\n          return 'Is not enough';\n        }\n      }\n\n      return {\n        computedCount: state.count + 10,\n        isEnough: isEnough(),\n      };\n    }\n  )\n);\n\nfunction Counter() {\n  const { count, computedCount, isEnough, inc } = useStore();\n\n  return (\n    <div>\n      <button onClick={inc}>Increment</button>\n      <div>count: {count}</div>\n      <div>computedCount: {computedCount}</div>\n      <div>isEnough: {isEnough}</div>\n    </div>\n  );\n}\n\n// Render the Counter component to a DOM element\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<Counter />);","lang":"javascript","description":"Demonstrates how to create a Zustand store with computed state using the middleware and use it in a React component, showcasing basic increment and derived values."},"warnings":[{"fix":"Profile your application to identify expensive computed functions. Consider optimizing their logic or, for specific use cases, using Zustand's built-in selectors with memoization (`useCallback`) if a computed value is only needed in particular components and doesn't need to be part of the global store.","message":"Computed values are re-evaluated on every state change. To prevent performance bottlenecks, ensure that computed functions are kept lightweight and perform minimal computations.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Refer to the TypeScript example in the package's README, ensuring your `create` function correctly applies generics like `create<CombinedStore>(computed<Store, ComputedStore>(...))`.","message":"When using TypeScript, explicit and correct type declarations are crucial for the base store, computed store, and their combined type to ensure full type safety throughout your application.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider migrating to the more actively maintained `zustand-computed` package if you require recent features or bug fixes, being mindful of the API changes, specifically the move from `computed` to `createComputed` in its v2.0.0 release.","message":"The original `zustand-middleware-computed-state` package seems to have been less actively maintained since its initial release. A package with a similar name, `zustand-computed`, has actively developed and introduced a breaking change in v2.0.0, replacing the `computed` middleware with a `createComputed` function.","severity":"deprecated","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure you are using the named import `import { create } from 'zustand'` for modern Zustand versions. If you are in a CommonJS environment, check your bundler configuration to correctly handle ESM modules.","cause":"This typically occurs due to incorrect module import of `create` from 'zustand', often stemming from CommonJS/ESM interop issues or version differences in Zustand.","error":"TypeError: (0 , zustand__WEBPACK_IMPORTED_MODULE_0__.create) is not a function"},{"fix":"Define a `CombinedStore` type that merges your base store and computed store types (e.g., `type CombinedStore = BaseStore & ComputedStore;`). Then, pass this `CombinedStore` type as a generic to Zustand's `create` function: `create<CombinedStore>(...)`.","cause":"In TypeScript, this error indicates that the type of your store (`BaseStoreType` in this example) does not include the computed properties. The combined store type, including computed state, needs to be explicitly used.","error":"Property 'someComputedValue' does not exist on type 'BaseStoreType'."}],"ecosystem":"npm","meta_description":null}