Zustand Computed State Middleware

Common errors

• TypeError: (0 , zustand__WEBPACK_IMPORTED_MODULE_0__.create) is not a function

  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.
  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.

• Property 'someComputedValue' does not exist on type 'BaseStoreType'.

  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.
  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>(...)`.

Warnings

• gotcha Computed values are re-evaluated on every state change. To prevent performance bottlenecks, ensure that computed functions are kept lightweight and perform minimal computations.
  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.
• gotcha 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.
  Fix: Refer to the TypeScript example in the package's README, ensuring your `create` function correctly applies generics like `create<CombinedStore>(computed<Store, ComputedStore>(...))`.
• deprecated 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.
  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.

Install

• npm install zustand-middleware-computed-state npm
• yarn add zustand-middleware-computed-state yarn
• pnpm add zustand-middleware-computed-state pnpm

Imports

• computed
  wrong:

  const { computed } = require('zustand-middleware-computed-state')

  correct:

  import { computed } from 'zustand-middleware-computed-state'

  This is the primary named export for the middleware. While CJS bundles may exist, the package primarily targets ESM environments.
• create
  wrong:

  import create from 'zustand'

  correct:

  import { create } from 'zustand'

  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.
• StateCreator
  wrong:

  import { StateCreator } from 'zustand'

  correct:

  import type { StateCreator } from 'zustand'

  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.

Quickstart

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.

import create from 'zustand';
import { computed } from 'zustand-middleware-computed-state';
import React from 'react';
import ReactDOM from 'react-dom/client';

const useStore = create(
  computed(
    (set) => ({
      count: 0,
      inc: () => set((state) => ({ count: state.count + 1 })),
    }),
    (state) => {
      function isEnough() {
        if (state.count > 100) {
          return 'Is enough';
        } else {
          return 'Is not enough';
        }
      }

      return {
        computedCount: state.count + 10,
        isEnough: isEnough(),
      };
    }
  )
);

function Counter() {
  const { count, computedCount, isEnough, inc } = useStore();

  return (
    <div>
      <button onClick={inc}>Increment</button>
      <div>count: {count}</div>
      <div>computedCount: {computedCount}</div>
      <div>isEnough: {isEnough}</div>
    </div>
  );
}

// Render the Counter component to a DOM element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);