Clarification on using getState() vs useStore and potential side effects

[maurosaladino]

Hi,
first off, thank you for creating such an amazing state management library!

I have some questions to ask you:

1. Difference Between useStore and getState() for Accessing Functions

I’ve been discussing the usage of useStore versus getState() for accessing functions within the store. For example:

const { addTodo } = useTodoStore(state => state.addTodo);
vs
useTodoStore.getState().addTodo();

It’s clear that useStore is typically used to subscribe to state changes, ensuring that components re-render when the state updates. However, when using useStore to access a function like addTodo, what are the practical differences from using getState() directly, given that functions do not change and do not trigger re-renders?

2. Potential Side Effects or Risks of Using getState().aFunction Outside a React Component

Is there any risk or are there any potential side effects when calling a function from the store using getState().aFunction() outside of a React component? Does this bypass any important mechanisms provided by Zustand that I should be aware of?

3. Potential Side Effects or Risks of Using getState().state Outside a React Component

Similarly, are there any risks or potential side effects when accessing a piece of state directly using getState().aState outside of a React component? I’m concerned about whether this approach might cause issues, such as missing updates or not triggering necessary reactivity.

Thank you

[dbritto-dev]

@maurosaladino there're not differences between using getState() inside/outside of React components/hooks, the only issue that you can have would be calling a Reach Hook outside of React components/hooks.

[dbritto-dev]

https://zustand.docs.pmnd.rs/guides/practice-with-no-store-actions

[maurosaladino]

Thank you for the clarification!

Just to follow up, could you please clarify if there are any practical differences between using useStore versus getState() in a React component specifically for accessing functions like addTodo, especially since functions do not trigger re-renders? I’m curious if there’s any reason to prefer one method over the other in this context.

Thanks again!

[dbritto-dev]

@maurosaladino yeah, sure. The only different between accessing state using getState() and useStore(...) in React is that you could end up having extra re-renders by accessing to the state using getState(), in the other hand you could improve your perf by memoizing selectors using useStore(...)

[JonnyAxelsson]

I access state with getState() becouse it is availible directly without rerender.
I have cases where i need to read the state inside a function directly after setting it and this works for me.
Also been afraid that this could have side effects but looks like this should be ok based on the answer above.