Use-zustand NPM

use-zustand

Another custom hook to use Zustand vanilla store

Install

npm install zustand use-zustand

Usage

import { createStore } from 'zustand/vanilla';
import { useZustand } from 'use-zustand';

const countStore = createStore((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const count = useZustand(countStore, (state) => state.count);
  const inc = useZustand(countStore, (state) => state.inc);
  return (
    <div>
      {count} <button onClick={inc}>+1</button>
    </div>
  );
};

But, why?

Zustand has useStore hook that can be used with vanilla store, which is identical to useZustand in terms of the usage.

import { createStore, useStore } from 'zustand';

// `createStore` is the same with:
import { createStore } from 'zustand/vanilla';

useStore is implemented with useSyncExternalStore which is a recommended way to use "external stores". It solves tearing issues.

However, the "Sync" behavior doesn't work nicely with concurrent rendering. We can't use startTransition as expected.

useZustand doesn't use useSyncExternalStore, but only useReducer and useEffect. It suffers from tearing, but works better with concurrent rendering.

After all, it's a trade-off.