React-Redux-Firebase App deletes document but doesn't refresh after returning from a details page

Question

I have a react-redux-firebase app that everything works fine at first, I can view, add and delete items and everything works as expected. However, if I click on a document to see it in more detail on my details page, when I return to the dashboard (home) and delete any document it removes it from database, but doesn't disappear from my app until I refresh the browser. As long as I don't go to the details page, it works like it's supposed to, automatically refreshing. Seems leaving my dashboard to go view details on a document then returning takes away the auto-refresh. Here's a bit of my code: I map through the docs, adding a link to the detail page for each:

<Link to={'/todo/' + e.id} className=""> *bunch of JSX*  </Link>

Once I'm on the detail page I connect to the firestore and retrieve the data and display it. Then if I click on the details it returns me back to the dashboard. Code on my details page that returns me back:

<NavLink to='/'> *bunch of JSX* </NavLink> 

Thanks for helping, MB

Answer 1

You might wanna check before rendering your data if the items array is loaded, and display a loader or something while the data is not loaded.

something like this:

if (!items) {
  return (
    <Container>
      <Loader />
    </Container>
  );
} else {
  return (
    <Container>
      {items.map((item) => (
        <Item key={item.id} />
      ))}
    </Container>
  );
}