Search code examples
reactjszustand

Do I need to add zustand store to useEffect dependency array?

I have a zustand store, like this

import create from 'zustand';

export const useNotificationStore = create((set) => ({
  notifications: [],
  addMessage: (payload) =>
    set((state) => ({
      notifications: [
        ...state.notifications,
        { ...payload },
      ],
    }))
}));

When using this store in React component, do I need to add this store to dependency list? For example

function Notify() {
  const notify = useNotificationStore();
  
  useEffect(() => {
    // do something async
    notify.addMessage({ ... })
  }, [dependency1]) // do I need to add notify here?

  return <div />
}

For redux, there was no need to add dispatch to dependency list. Is it true for zustand?

Solution

  • Technically yes – there's nothing stopping you from doing set({addMessage: ...}), and so notify.addMessage would change.

    Practically: probably not.