Is use-sync-external-store really required if you use createWithEqualityFn from zustand/traditional?

[dumbmatter]

I thought use-sync-external-store was just a polyfill for people on old versions of React, but the migration docs seem to say you need it, and I do indeed get a build error if I don't have it:

"use-sync-external-store/shim/with-selector.js" is imported by "node_modules/.pnpm/zustand@5.0.0_@types+react@18.3.11_react@18.3.1/node_modules/zustand/esm/traditional.mjs", but could not be resolved – treating it as an external dependency.

Also the docs website seems pretty flaky. Sometimes clicking links does nothing, sometimes search returns nothing, sometimes it's an error page like "Application error: a client-side exception has occurred (see the browser console for more information).". I'm using the latest version of Firefox.

[dbritto-dev]

@dumbmatter we're working on revamping docs, basically migrating away from nextjs to vitepress. zustand/traditional relies on use-sync-external-store

[dumbmatter]

Why though? Is use-sync-external-store not just a polyfill? Package description says it is.

[dbritto-dev]

@dumbmatter yes and no, use-sync-external-store supports selectors and equality functions widely used on Zustand

[Fabioni]

Thanks @dumbmatter, installing npm i use-sync-external-store fixes

Could not resolve "use-sync-external-store/shim/with-selector.js" imported by "zustand". Is it installed?

Shouldn't that be a dependency if it is needed for Zustand?

[dbritto-dev]

@Fabioni https://github.com/pmndrs/zustand/blob/main/package.json#L153

[Fabioni]

I had the error message

Could not resolve "use-sync-external-store/shim/with-selector.js" imported by "zustand". Is it installed?

and had to install npm i use-sync-external-store manually, so somehow https://github.com/pmndrs/zustand/blob/main/package.json#L153 did not work.

I am using version 5.0.1

[Fabioni]

Maybe because of this?

"use-sync-external-store": {
  "optional": true
}

[nitasn]

I ended up writing a small "createWithEqualityFn" hook myself, instead of adding another dep.
Implementing takes inspiration from zustand's useShallow.

import { useRef } from "react";
import { shallow } from "zustand/shallow";

export function useStableDerivedObject<TState, TDerived extends object>(
  selector: (state: TState) => TDerived,
  options: { isEqual: (a: TDerived, b: TDerived) => boolean },
) {
  const isEqual = options.isEqual ?? shallow;
  const prev = useRef<TDerived>(undefined);

  return (state: TState) => {
    const next = selector(state);

    if (prev.current === undefined || !isEqual(prev.current, next)) {
      prev.current = next;
    }

    return prev.current;
  };
}

usage like

  const addresses = useMyStore(
    useStableDerivedObject<MyStore, Address[]>((state) => state.addresses, {
      isEqual: (A, B) => A.length === B.length && A.every((_, idx) => A[idx].id === B[idx].id),
    }),
  );