The issue with useEffect in this use case is that it is very easy to make errors in logic or dependency that cause Kibana to fire multiple toasts for a single event. These are not fun to debug and have happened a few times in the development of Synthetics UI.
The latter approach, creating an action-driven response to an event that has a 1:1 relation with the event itself, ensures that only one toast can ever be fired for the given event. This is because it's a side effect of the conclusion of the event, instead of being part of a function that can be re-evaluated many times. It also reduces the need for nesting conditional logic within the UI components themselves, or within hooks that they then call.
Proposal
We should devise a reusable way of ensuring we only dispatch toasts on a 1:1 basis with the event associated with the toast.
Describe the feature:
There are lots of places in Synthetics where we rely on
useEffect
to fire toasts.useSimpleMonitor
useMonitorSave
deleteMonitor
OverviewStatus
And many more.
There are also places where we apply Redux-driven logic to create toasts, often leveraging our Redux Saga infrastructure.
Example: https://github.com/elastic/kibana/blob/78671f113cc68f5e1696bbe4aed2320978c97e11/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/effects.ts#L52.
Describe a specific use case for the feature:
The issue with
useEffect
in this use case is that it is very easy to make errors in logic or dependency that cause Kibana to fire multiple toasts for a single event. These are not fun to debug and have happened a few times in the development of Synthetics UI.The latter approach, creating an action-driven response to an event that has a 1:1 relation with the event itself, ensures that only one toast can ever be fired for the given event. This is because it's a side effect of the conclusion of the event, instead of being part of a function that can be re-evaluated many times. It also reduces the need for nesting conditional logic within the UI components themselves, or within hooks that they then call.
Proposal
We should devise a reusable way of ensuring we only dispatch toasts on a 1:1 basis with the event associated with the toast.