DEV Community

Cover image for useBoundStoreWithEqualityFn in Zustand’s source code explained.
thinkThroo
thinkThroo

Posted on

useBoundStoreWithEqualityFn in Zustand’s source code explained.

In this article, we will understand how the useBoundStoreWithEqualityFn function is used in Zustand’s source code.

Image description

The above code is picked from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn is called in createWithEqualityFnImplfunction and returns another function named useStoreWithEqualityFn.

Let’s look at what’s in useStoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}
Enter fullscreen mode Exit fullscreen mode

useSyncExternalStore is a React Hook that lets you subscribe to an external store and useSyncExternalStoreWithSelector is imported as shown below:

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
Enter fullscreen mode Exit fullscreen mode

slice returned by this function, useStoreWithEqualityFn is further used in createWithEqualityFnImpl .

const useBoundStoreWithEqualityFn: any = (
  selector?: any,
  equalityFn = defaultEqualityFn,
) => useStoreWithEqualityFn(api, selector, equalityFn)

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn
Enter fullscreen mode Exit fullscreen mode

Object.assign updates the slice returned by useBoundStoreWithEqualityFn with the “api”.

The screenshot below demonstrates with an example how Object.assign does the update

Image description

and finally useBoundStoreWithEqualityFn is returned by createWithEqualityFnImpl.

About us:

At Think Throo, we are on a mission to teach the best practices inspired by open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

  1. https://github.com/search?q=useBoundStore&type=code

  2. https://github.com/churichard/notabase



Top comments (0)