Registry / web-framework / zustand-computed-state

zustand-computed-state

library0.2.0jsnpmunverified

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.

web-framework

npm install zustand-computed-state

github ↗package ↗

INSTALL

IMPORT

SIG · ZUSTAND-COMPUTED-S

zustand-computed-state

web-frameworkjavascriptv0.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

computed

✓ import { computed } from 'zustand-computed-state';

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

Primary middleware export for wrapping the Zustand store creator. The package primarily uses ESM.

compute

✓ import { compute } from 'zustand-computed-state';

✗ import compute from 'zustand-computed-state';

A utility function used inside the `computed` middleware to define the derived state. It's a named export, not a default.

StateCreator

✓ import { StateCreator } from 'zustand';

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.

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.

import { create } from 'zustand'; import { computed, compute } from 'zustand-computed-state'; type Store = { count: number; inc: () => void; dec: () => void; countSq: number; // Computed state }; const useStore = create<Store>()( computed((set, get) => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), dec: () => set(state => ({ count: state.count - 1 })), // Example: get() can access computed states square: () => set(() => ({ count: get().countSq })), root: () => set(state => ({ count: Math.floor(Math.sqrt(state.count)) })), // Define computed state 'countSq' based on 'count' ...compute(get, state => ({ countSq: state.count ** 2, })), })) ); // Usage in a component (example, not runnable here) /* 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> ); } */ console.log('Initial state:', useStore.getState()); useStore.getState().inc(); console.log('After increment:', useStore.getState());

Debug

Known issues

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

fix

For slice patterns, use `...compute('my_slice_id', get, state => ({...}))`.

affects: >=0.1.0

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

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.

affects: >=0.1.0

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

fix

Always check the `zustand-computed-state` release notes and peer dependency requirements when upgrading `zustand` to a new major version.

affects: <=0.2.0

Errors

Common errors & fixes

TypeError: create is not a function

Attempting to use `create` without importing it from `zustand`.

fix

Ensure `import { create } from 'zustand';` is present at the top of your file.

Property 'computedProperty' does not exist on type 'StoreType'

The TypeScript type for your store (`StoreType`) has not been updated to include the newly defined computed properties.

fix

Manually add the computed properties and their types to your `StoreType` interface or type alias. For example, `type Store = { count: number; countSq: number; };`

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

zustandrequiredThis package is a middleware for Zustand and requires a compatible version of Zustand to function.

Agent activity

39 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/yasintz/zustand-computed-state ↗

packagehttps://www.npmjs.com/package/zustand-computed-state ↗