Side effect when a value change

[doliG]

Hey,

I have some value on my store that needs to be recomputed / fetched when one or multiple other value changes.

In react components it's very simple using useEffects, but with zustand I'm not sure how to do it. Here's some sample of working solutions I found:

// Pattern 1
const useStore = create((set, get) => ({
  currency: 'USD',
  balance: 0,

  setCurrency: (currency) => {
    set({ currency })
    get().updateBalance() // call to update function in actions that requires it
    sendTelemetry()
  }

  updateBalance: async () => {
    const balance = service.fetchCurrency(get().currency)
    set({ balance })
  }

  sendTelemetry: () => {
    tracking.send(/* stuff */)
  }
}))

This first pattern is probably the easiest to understand, but I'm not sure of it beacuse it breaks separations of concerns

// Pattern 2
const useStore = create((set, get) => ({
  currency: 'USD',
  balance: 0,

  setCurrency: (currency) => set({ currency })
})

useStore.subscribe(
  (state) => state.currency,
  (currency, previousCurrency) => {
    const balance = service.fetchCurrency(useStore.get().currency)
    useStore.set({ balance })
    tracking.send(/* stuff */)
  }
)

In this second store I'm using subscribing but cannot really call set in subscribe, and feel like it can leads to some tricky problems (like infinite updates) 🤔
Also, it's not compatible with slice.

So I'm a little lost, it's a simple problem that I solved with solution 1 but honnestly I feel like I'm doing it wrong

[dai-shi]

Calling functions in actions is the best. Subscribing may work, but it's an extra overhead and easy to loop infinitely.

In react components it's very simple using useEffects

Probably, it's not the right use of useEffect.

[doliG]

So you mean my first approach is right ?

[dai-shi]

Yes.

[doliG]

Update: After doing some research I found a better solution for part of my problems

• use computed props (see Handling side effects using subscribeWithSelector #1363 (comment)).
• call functions in actions for side effects like telemetry

Thank you @dai-shi for your support