How to use ToastState (useToastState) in side effects

[JurajKruzliak]

I implemented our own version of Toast using useToast and useToastState. As such, to create new toast we use state.add() but not in every case we want to call it on user interaction such as button press.

How should we use it in, for example useEffect as a reaction to some other change in application, when we want to follow the "non-exhaustive deps" rule for the dependency array? When we add the state in the dependency array [state] it creates infinite cycle.

useEffect(() => {
  state.add(someStringState);
}, [someStringState, state])

Any words of advice or something I am missing here?

[snowystinger]

What's the thing that's driving the state change? Can you create the toast there? for instance, in a press handler? or a network request handler?

I don't quite follow:

but not in every case we want to call it on user interaction such as button press.

Could you have a conditional in the press handler to determine if you should show it again?

Otherwise, the infinite loop is not hard to avoid, you can just track the previous value and compare to that before calling state.add again.

[piotr-musiol]

Hey, I've also run into the same problem in my app. Ok, I might agree with @snowystinger - once you know about the issue it is pretty easy to avoid, but since this is a public library, I think there's still value in fixing it, right?

To me, the same way as for native const [value, setValue] = useState(); I expect setValue to be a stable in between re-renders, it would be really expectable to have stable toastState.add. And right now it seems to be a new arrow function for every rerender: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/toast/src/useToastState.ts#L86