Handling state changes with toast

[bvsillorequez]

tl;dr: I am trying to add a universal toast on Console and the state management is causing issues.

I am trying to implement toast in console and trying to make it universal so anyone who uses it will have the toast for their pages in queue in the same array. Right now, if two different apps (or more) use useToaster() then the toast will stack on top of each other. Here's a quick video/codesandbox link on what it does when that happens.

toast.mov

https://codesandbox.io/s/mystifying-architecture-0yj9n?fontsize=14&hidenavigation=1&theme=dark

In Console, I am trying to put the toast on the top level, wrapping the rest of the components, and this causes a re-render every time useToaster is called because it returns a new object every time.

Is there a way to change the state management with useToaster? IE make it a singleton or have an override
And if I am missing something completely and this isn't possible, can you explain why? And next steps?

[SiTaggart]

Hi @bvsillorequez I'm not entirely sure I follow, are these two distinct observations? Do you mind rewording slightly?

Also, unfortunately it looks like the codesandbox didn't save, so when I visit the link I just see the default template.

[bvsillorequez]

Hi @SiTaggart.

If two different apps, take for instance if Console and Messaging both implement a toast and they both fire at the same time, they will stack on top of each other and a toast will be hidden behind another. This could cause the user to miss an error or any kind of clarification that the toast was intended for.

What I am trying to do in Console is make a universal toast using the toast component, so when any other team needs to use a toast we are using the same array of toasts instead of multiple spread across different services. Doing so, would fix the toast from stacking on top of each other.

Using useToaster causes a problem because it returns a new object every time and it causes a re-render of Console . This is at the top level and using this context provider, that new object is what causes the re-render because every time Provider is called useToaster is called and the new object is passed.

<Provider value={toaster}>
   {children}
</Provider>

If the state management for useToaster can be made into a singleton or something similar would give us just one instance for console and would solve the un-intended re-renders. Would that be possible to do? What would you recommend?

[TheSisb]

Hi @bvsillorequez,

From my (very little) understanding of console, each product is a separate bundle that gets loaded in. So if Messaging wraps their app with the Toaster, then no other Toaster will be loaded. When swapping to Voice, Messaging is fully unmounted and Voice now loads its own Toaster. Is my understanding here correct?
The reason I bring this up: assuming the above is true, in what situation could two Toasters be loaded at once?

[bvsillorequez]

@TheSisb Toasters can be loaded at the same time for both the sidebar and masthead on Console along with the toaster that is loaded with the product. Say an error both happens in a product and on the sidebar at the same time, they would start stacking on top of themselves. If the dismissAfter is set to the same timing, then there is potential the user will miss one of the toast

[TheSisb]

Hi @bvsillorequez - we don't have an answer for you yet, but we're still looking into this and discussing internally. Will keep you posted.

[TheSisb]

Hi again @bvsillorequez,

Is there a way to change the state management with useToaster? IE make it a singleton or have an override And if I am missing something completely and this isn't possible, can you explain why? And next steps?

So we spoke about this at length internally and right now the best thing for you to do, as a Console product team, is to build your own state management for Toasts. You'll also get full control of what (re-)renders and will be able to handle message passing with Console's Navigation bundle. If you look at this example: https://paste.twilio.design/components/toast#adding-a-toast useToaster is where all the state management lives. You will still be able to use Toaster and Toast as they are fully presentational. The source code for useToaster can be found here as a heavily commented example: https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/toast/src/useToaster.ts.

We aren't able to provide this functionality in our component because it couples application logic with the component's presentation. Console's specific requirements around shared state between Navigation and Products doesn't quite fall within the purview of a design system, and such a feature can add unneeded complexity to our other users.

[katieporter]

Hey @bvsillorequez - just wanted to followup on this and see if you had any additional questions or if you're all set.

[bvsillorequez]

@katieporter I'm all set. Thanks for following up