Cannot Fetch Query Parameters

[SarthaKashmira]

Inside Home/index.jsx my query parameters are changing whenever I am entering any data inside the Input tag.But on re rendering the component the latest values are not being fetched by the useQueryParams() custom hook from the url.

[SarthaKashmira]

@jaimysimon I am having the above problem. Can you please have a look.

branch - https://github.com/SarthaKashmira/Cinesearcher-Sarthak-Kashmira/tree/13-add-pagination-and-query-params

[jaimysimon]

Can you add a NeetoRecord video explaining exactly what the problem is? For me, it is working as expected, so maybe I didn’t understand the issue correctly.

[SarthaKashmira]

https://sarthakashmira.neetorecord.com/watch/804f3ad3c839b08b1c69
I have recorded the issue. @jaimysimon

[jaimysimon]

@SarthaKashmira Please see: https://jaimy-simon.neetorecord.com/watch/95cdc667ddf76137db41

[SarthaKashmira]

@jaimysimon
But since I am setting the searchKey every time ,the component is rendered again which is invoking the useLocation hook every time inside useQueryParams custom hook.

[jaimysimon]

Yes, it invokes useLocation, what I meant is location.search and history.location.search is out of sync.

[SarthaKashmira]

@jaimysimon
It worked when I changed the code inside the useQueryParams custom hook of location.search with history.location.search.
I will study the difference between both of them while invoking or when the url is changed.

[jaimysimon]

Could be related:

• [Bug]: useLocation out of sync with history.location, leads to potential renders of unmatched Routes remix-run/react-router#11473
• useLocation and history.location.pathname are not in sync salvoravida/redux-first-history#117

I will also take a further look at it, you can use the workaround right now.

[SarthaKashmira]

Actually I read about it and it clearly specified that useLocation can access current url string ,therefore I searched on whether it doesnt work due to version issue as now 7 version of react router is published and we were using 5 version.Therefore my head was all around useLocation only.
I will refer the above article

[jaimysimon]

Found the issue:

• https://jaimy-simon.neetorecord.com/watch/49040aee0022f15920ba
• https://jaimy-simon.neetorecord.com/watch/2342a555cafd84598590

Ref: facebook/react#24451