What is the best way of clearing the state on route change?

[sebpowell]

I'm using React, Redux Toolkit, and React Router.

When some pages load, data is fetched and placed in the store. If user leaves the page, and comes back to it, there's a flash of old content. The obvious solution is to reset the state for the relevant slice(s) when the user exits the page.

I'm guessing one way of going about this is to use useEffect when the page unmounts – something like this:

const ComponentExample => () => {
    useEffect(() => {
        return () => {
           // Component unmounts, tell Redux to reset the state
          dispatch(resetState())
        }
    }, [])
}

I'm just wondering if there's a better way? Any advice gratefully received.

[mitroc]

Personally, I don't see anything wrong with keeping the old content while fetching the new one. Of course, having a loader would be nice. I understand, though, that for some reason you don't want this behavior. Then I think I would probably do it the way you proposed. Alternatively, if using RTKQ, I would consider decreasing the value for keepUnusedDataFor (which defaults to 60 seconds).

[EskiMojo14]

are you quoting somebody? 😕

[mitroc]

Sorry, corrected ;)

[sebpowell]

@mitroc thank you! Yes, in this case, it was necessary to reset the state to avoid a flash of content as it was making the UI a little confusing. I ended up doing what I outlined above, and it worked perfectly. Going to close this issue.

[phryneas]

Urually this occurs because you think of your Redux store as "data for a component". If this data only exists for your component and resets when your component unmounts, it should probably be bound to your component as local state - or you step a moment back and think about your data.

This is probable not projectData, but data for project 8, and when visiting another page it would be data for project 5. If you keep data structured like that, it doesn't need to "reset", it might even be good if you come back to project 5 and the data for project 5 is already there. It's not a "flash", but "temporarliy potentially outdated data" that you refetch when necessary.

You can structure your data by hand accordingly, or you can use RTK Query instead of manually fetching it, which I would recommend and which also stores data "by project" for you in such a case. It is covered in our official tutorial here: Essentials, Part 7: RTK Query Basics

[sebpowell]

@phryneas – good suggestion, thank you! The case in question is a page that lists out data which can have one or more filters applied to it. If user applies filters, the URL params change accordingly. If they navigate away from the page, the filters are reset when they come back to it, meaning the data also needs to be reset.

In theory, this could be easily resolved by keeping the data in a local state as you've pointed out. However, in this case, it won't work because we are using Pusher, so we need to be be able to update the data from outside the component when new data comes in. This is why we are storing this data in Redux; we can update it from anywhere in our application.

So unless I'm missing something, I think the approach outlined above might actually be the best one for the use case (but thank you for the suggestion nonetheless).

[phryneas]

Well, the real recommendation was not to use local state - it just shows that the way you are using it right now, you are not getting any benefits from using Redux - even pusher could probably be subscribed to locally.

The real recommendation is to use RTK Query, and that recommendation still stands, especially with those filters you describe there. Pusher would work likely work as described in streaming updates.

[sebpowell]

@phryneas apologies – RTK Query does look good, and I think it makes sense for us to start using it. But I'm not sure how it would solve our problem; we still need to use Pusher (to notify other connected clients that an update has been made), and even if we do use RTK Query, I believe we'll still run into the same problem; the data loaded by the user whilst on the page needs to be removed due to the fact that when they return to it, we reset any filters they may have applied previously (and thus, any data loaded is no longer relevant).

Have I missed something?

[phryneas]

Yes, you missed something :)

RTK Query stores every query in a different cache entry - useEndpoint1(filters) and useEndpoint1(differentFilters) are stored at different places in your Redux store, and will give you different results, and no result if that cache entry is not in cache once the component gets mounted. You will not get "flashing" as you have no reason to clean up data anymore.

As for pusher: I don't see why that wouldn't work with it?

[sebpowell]

@phryneas ah, I see! I think that makes sense – and yes, that should still work with Pusher. Going to give it a go, thank you for explaining. Have a nice evening.