Toast component stale messages state issue, while quickly calling toastRef.show

[prakash1998]

• initially Toast component will have messages = [] in state
• when i call toastRef.show for the first time it's fine, and now state = { messages : [ msg1 ] }
• but after that when i call toastRef.show for 2 times back to back like this

toastRef.show(msg2);
toastRef.show(msg3);

then it's ignoring msg2 and now state = { messages : [msg1,msg3] } ( consider msg are sticky )

Reason : it is because show method is using this.state.messages when updating state, so when i call it quickly for multiple time, then all calls have old state

Solution: you can use fresh state which calling setState like this

this.setState(newState) // before
this.setState(prevState => newState) // after

i would like to submit merge request if you want me to, thanks.

[mertsincan]

Hi,

Unfortunately, I didn't fully understand this problem. Do you have a codesandbox link for us to replicate? Also, We would be grateful if you create a PR with the possible solution.

Best Regards,

[prakash1998]

here is codesandbox with regeneration of the issue, https://codesandbox.io/s/awesome-johnson-csvdh

• you can excuse that i should pass array if i want to show multiple, but i'm just saying that we can resolve this issue and it's better to resolve, because it's simple example but you can think of multiple async events calling this, and some of them will be lost ( means the last most will be served to user)

[callmephil]

@prakash1998

Ref will hold one (unique) reference of the selected HTML element. in your example, you trigger 'show' twice on the same element and that causes you to override the first call.

Fortunately, Primereact docs explain how to triggers multiple toast/messages at the same time. it's fairly simple, you pass an array instead of a single object.

Knowing that you can refactor your function

    const showMultiple = () => {
        toast.current.show(
            {severity:'info', summary:'Message 1', detail:'First message', life: 3000});
        toast.current.show(
            {severity:'info', summary:'Message 2', detail:'Second Message', life: 3000});
        
    }

to the following

const showMultiple = () => {
       toast.current.show([
                {severity:'info', summary:'Message 1', detail:'First message'},
                {severity:'info', summary:'Message 2', detail:'Second message'},
        ]);
}

And it should work as intended =)

[prakash1998]

@callmephil i already have mentioned this solution in my previous comment, but just think about async events, which may fire at the same time, and it's not that much hard to solve as mentioned in original issue statement.

[MajorPrime]

@prakash1998 Would a "throttling" pattern work for your async use case?
All messages would be sent via a throttled function, which calls .show at most every 10ms (passing all messages received since the last call to .show)? (10ms is just an example - I don't know what value would work)

[prakash1998]

yes it works, i have tested on my side, and already using fork of it in my project temporarily.

[melloware]

I think this will be fixed by this PR: #2669

[melloware]

This is fixed in 8.0.0-RC1 now that hooks are being used: https://codesandbox.io/s/primereact-test-forked-5zuel3