session.flash question

[gavriguy]

I setup a global message on an outlet container that should show flash message only once.

On route a I have a form that when submitted will add a flash message and redirect to route b.

This is working as expected but when going back to route a I still see the message.
Only after hard refresh the message disappears. Is that the expected behavior?

here is a link to a working example - https://codesandbox.io/s/trusting-dhawan-cnfkl3?file=/app/routes/container/a.tsx

[kiliman]

Remix is actually working as designed. The issue is that you're displaying the flash message in a common parent route.

When route a submits and redirects to b, Remix will revalidate the loaders. This will fetch from container route and render the global message. When you navigate from b back to a, the container route is still a common parent route, so Remix will not refetch the data, nor will it re-render.

The rule of thumb is don't render anything in parent routes that you expect to change when simply navigating in common child routes.

You need something that will trigger the parent to re-render.

In this sample, I'm using useLocation to check every time the route changes, and only display the message if the current location matches the savedLocation.

export default function () {
  const { globalMessage } = useLoaderData()
  const location = useLocation()
  const [savedLocation] = useState(location.key)
  return (
    <div>
      {location.key === savedLocation && <div>{globalMessage}</div>}
      <Outlet />
    </div>
  )
}

https://codesandbox.io/s/friendly-benji-1or7jr?file=/app/routes/container.tsx

[gavriguy]

Thank you @kiliman for clearing that out.

I wonder if it's better to use userRef as we just need a place to store data e.g.

export default function () {
  const { globalMessage } = useLoaderData()
  const location = useLocation()
  const locationRef = useRef(location.key)
  return (
    <div>
      {location.key === locationRef.current && <div>{globalMessage}</div>}
      <Outlet />
    </div>
  )
}

https://codesandbox.io/s/confident-star-k298k0?file=/app/routes/container.tsx