Get() method from store does not force rerender

[bruno-teruel]

I have a state in zustand where I have a simple get() method to get specific information from my state. What I have noticed however is that in a react component where I call get(), will not rerender upon a state change. Is this an incorrect use of zustand? if so what would be a better approach? I thought of using the state itself, and perform calculations/modifications at the components during render, but that just feels disorganized and repetitive when I need to call this information multiple times throughout my app. Thanks in advance!

Here is a snippet illustrating what I mean:

export const useBearStore = create()((set, get) => ({
    bears: 0,
    getBearsPlusFive: () => {return get().bears + 5}
})

const BearComponent = (props) => {
     const getBearsPlusFive = useBearStore((state) => state.getBearsPlusFive)
     return (<p>getBearsPlusFive()</p>)
}

[dbritto-dev]

@bruno-teruel what about this:

const getBearsPlusFive = (bears) => bears + 5

const useBearStore = create()((set, get) => ({
  bears: 0,
}))

const BearComponent = (props) => {
  const bears = useBearStore((state) => state.bears)
  const bearsPlusFive = getBearsPlusFive(bears)
  return <p>{bearsPlusFive}</p>
}

[mkf62]

Any suggestions for removing object keys? See selectedHUCs property and removeHUCSelection action:

interface MapState {
    selectedHUCs: { [fid: number]: FeatureLike }
}

interface MapActions {
    addHUCSelection: (newHUC: { [fid: number]: FeatureLike }) => void
    removeHUCSelection: (fid: number) => void
}

export const useMapStore = create<MapState & MapActions>()((set, get) => ({
    selectedHUCs: {},
    addHUCSelection: (newHUC) =>
        set((state) => ({
            selectedHUCs: {
                ...state.selectedHUCs,
                ...newHUC,
            },
        })),
    removeHUCSelection: (fid) => {
        const stateCopy = get().selectedHUCs
        delete stateCopy[Number(fid)]
        set({ selectedHUCs: stateCopy })
    }
}))

// In my function

// doing stuff ....
if (Object.keys(selectedHUCs).includes(fid.toString())) {
            removeHUCSelection(Number(fid))
}
// doing stuff...

I can't figure out how to update selectedHUCs in the removeHUCSelection action immutably. As such a useEffect that listens for changes on selectedHUCs does not get fired when the removeHUCSelection action makes updates to the state. I call removeHUCSelection outside of React, so making the update in this function doesn't really seem to work either

// In my function
const addHUCSelection = useMapStore.getState().addHUCSelection
const removeHUCSelection = useMapStore.getState().removeHUCSelection

export const onHucClick = (
    e: MapBrowserEvent<MouseEvent>,
    selectionLayer: VectorTileLayer,
    newHucLyr: VectorTileLayer,
) => {
    const selectedHUCs = useMapStore.getState().selectedHUCs
    newHucLyr.getFeatures(e.pixel).then(function (features) {
        const fid = feature.getId()

        // Add or remove feature from selected features
        if (Object.keys(selectedHUCs).includes(fid.toString())) {
            delete selectedHUCs[Number(fid)]
            removeHUCSelection(selectedHUCs)
        } else {
            addHUCSelection({ [fid]: feature })
        }

// In state
interface MapState {
    selectedHUCs: { [fid: number]: FeatureLike }
}

interface MapActions {
    addHUCSelection: (newHUC: { [fid: number]: FeatureLike }) => void
    removeHUCSelection: (newHUCSelections: { [fid: number]: FeatureLike }) => void
}

export const useMapStore = create<MapState & MapActions>()((set, get) => ({
    selectedHUCs: {},
    addHUCSelection: (newHUC) =>
        set((state) => ({
            selectedHUCs: {
                ...state.selectedHUCs,
                ...newHUC,
            },
        })),
    removeHUCSelection: (newHUCSelections) => set({ selectedHUCs: newHUCSelections }),

Even using that, the useEffect in my component that consumes selectedHUCs with useMapStore hook does not fire on removeHUCSelection updates.

[mkf62]

Well, two seconds after submitting my question I figured out how to do it. I guess sometimes it just takes asking the question to someone else for you to have an epiphany...

The removeHUCSelection action should look like this:

interface MapActions {
   //... other stuff
   removeHUCSelection: (fid: number) => void
}

export const useMapStore = create<MapState & MapActions>()((set, get) => ({
    //... other stuff
    removeHUCSelection: (fid) => {
        const stateCopy = { ...get().selectedHUCs }
        delete stateCopy[Number(fid)]
        set({ selectedHUCs: { ...stateCopy } })
    }
})

And in my function (that lives outside of a React component):

// doing stuff ....
if (Object.keys(selectedHUCs).includes(fid.toString())) {
            removeHUCSelection(Number(fid))
}
// doing stuff...

The important part was using the spread operator in curly braces to deeply copy the get() portion of state and doing the same when set() is called using the "new" state copy with the offending key removed. By doing this, I did not violate the rule of immutability.

[dbritto-dev]

@bruno-teruel you can avoid copying using immer, Zustand has immer middleware so keep that in mind

[veloii]

For any future people looking at this, calling the function inside of the selector worked fine.

export const useBearStore = create()((set, get) => ({
    bears: 0,
    getBearsPlusFive: () => {return get().bears + 5}
})

const BearComponent = (props) => {
     const bearsPlusFive = useBearStore((state) => state.getBearsPlusFive())
     return (<p>{bearsPlusFive}</p>)
}