How to use vanilla Zustand store with React Tracked?

[daphdev]

Hi, I am new to Zustand, and curious how to use vanilla Zustand store (created by createStore) with createTrackedSelector from React Tracked library. I use createStore according this tutorial (with React context), since I want to create a context store just for one area on UI (avoid prop drilling and messing up global store).

React Tracked's documentation only talks about using createTrackedSelector with Zustand's create, not createStore.

Ahh, my project is using TypeScript.

Thanks all.

[dai-shi]

This is a bit tricky and not 100% recommended hook pattern, but something like this should work:

import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'
import { createTrackedSelector } from 'react-tracked'

const store = createStore(...) // vanilla store without hooks

const StoreContext = createContext()

const App = () => (
  <StoreContext.Provider value={store}>
    ...
  </StoreContext.Provider>
)

const Component = () => {
  const store = useContext(StoreContext)
  const useTrackedStore = useMemo(() => createTrackedSelector(
    (selector) => useStore(store, selector)
  ), [store])
  const state = useTrackedStore()
  ...
}

(...Not exactly sure if this handles changing store well. Maybe better to use useRef.)

[daphdev]

Thanks @dai-shi.