Tracking state in URL params over multiple React components

Asked Jul 08 '22 at 01:29

Active Jul 08 '22 at 01:29

Viewed 86 times

I have a page which shows a list of items. These items are paginated, and can be searched, filtered, and ordered.

IndexComponent
-> SidebarComponent
   -> FilterComponentA
   -> OrderComponentB
-> ListContainerComponent
   -> SearchComponent
   -> PaginatedListComponent

There are several components here which have state related to the list which I want in the URL for page reload/URL sharing etc. The problem is that if we use react-router's useSearchParams() hook over multiple components they all end up with different versions of the searchParams and end up overriding each other due to immutability.

What is the best way to handle this situation so that we have minimal re-renders or state changes, without having to hardcode in the child state into the parent components (SidebarComponent shouldn't need to know if we add an extra filter option)?

asked Jul 08 '22 at 01:29

BeaverusIV

can we use context api? – Kritish Bhattarai Jul 08 '22 at 01:35
@kritiz I did try it but it re-renders the page a LOT which also means it makes a lot of API calls – BeaverusIV Jul 08 '22 at 02:00
a bit more examples could be helpful to understand the scene – Kritish Bhattarai Jul 19 '22 at 01:24
I don't think it's possible if someone hasn't posted any answer. I thought having shareable urls would be a common thing for a SPA, but apparently not. I'm guessing we would have to compromise and build a HOC which is aware of the variables we want to persist, or something – BeaverusIV Jul 20 '22 at 04:37

Tracking state in URL params over multiple React components

0 Answers0