Set the same session flash value multiple times

[piotrkulpinski]

Hi!

I'm trying to create a notification/toast system based on the Remix session flash feature:
https://remix.run/docs/en/v1/api/remix#sessionflashkey-value

Unfortunately, it only allows me to send a flash message once if the value is the same.

Hence, this works:

session.flash('notification', `Profile updated successfully ${Math.random()}`)

...while it doesn't:

session.flash('notification', `Profile updated successfully`)

Is there any solution to that?

[sergiodxa]

The session is an object, if you use the same key for two values only the last one will remain.

let session = {}
session.flash = "message 1"
session.flash = "message 2"
console.log(session.flash) // here the value is "message 2"

So the solution is to use different keys or store an array of values.

session.flash("notification", [...session.get("notification"), "new message"])

This way, you will keep previous messages on the session, and once you read it remember to consider it an array of strings.

[piotrkulpinski]

@sergiodxa I see, but this still doesn't explain my issue I think.
The problem is not the key but the value itself. Please check my first example where the key is the same but value is not and it's working.

From what I understand, the flash is clearing out each time when I do this in a loaded:

return json(
    { message },
    {
      headers: {
        // only necessary with cookieSessionStorage
        "Set-Cookie": await commitSession(session),
      },
    }
  );

So I think on the next action, when I add the flash it should already be cleared out.

[piotrkulpinski]

I think I should also point out that I'm only setting the notification flash once, then it's unset as stated in the docs: Sets a session value that will be unset the first time it is read..

So the flow looks like this:
Form submitted -> Action (sets flash) -> redirect -> Loader (reads flash and unsets it) -> Form rendered again

And when I try to submit the same form again, the flash is not added unless the flash value is different than the previous one.

[piotrkulpinski]

Does anyone have any solution to that?

[joelstein]

Yes, I had the same issue.

It was caused by setting the flash message to a string, then using a useEffect to display the toast. If the string doesn't change, the useEffect won't fire again.

I solved this by setting the flash message as an object instead of a string.

session.flash("message", {
  type: "success",
  message: "Profile updated successfully",
})

useEffect(() => {
  if (message) {
    toast[message.type](message.message)
  }
}, [message])

[piotrkulpinski]

That was exactly my solution finally:

useEffect(() => {
  if (flash?.message) {
    if (flash.type === 'success') {
      toast.success(flash.message)
    }

    if (flash.type === 'error') {
      toast.error(flash.message)
    }
  }
}, [flash])

Thanks for the confirmation!

[Danieljs-codes]

Yes, I had the same issue.

It was caused by setting the flash message to a string, then using a useEffect to display the toast. If the string doesn't change, the useEffect won't fire again.

I solved this by setting the flash message as an object instead of a string.

session.flash("message", {
  type: "success",
  message: "Profile updated successfully",
})

useEffect(() => {
  if (message) {
    toast[message.type](message.message)
  }
}, [message])

2 years later and this really helped me