useQueryParams hook returns stale values when going back in history

Hello, it’s me again 👋

So it seems that the latest changes introduced for useLocationChange have caused a problem with other hooks using it (not exactly sure why though).

When using useQueryParams, the URL param values returned when going back in history (web browser back button) do not reflect the current window location parameters, they are behind (stale).

I reverted to raviger 0.5.9 and the problem disappeared.

Would you have any idea what could cause that? If that’s too vague I can work on building a reproduction somewhere, let me know.

[yenoiwesa]

After more than an hour trying to debug the issue (and it’s now 11.30pm here in Sydney hehe) I think I have found the reason for the bug.

useRoutes will always be used in a parent component of any component that themselves use useQueryParams or usePath.

useRoutes uses useLocationChange here.

If you comment out the useLocationChange usage in useRoutes, the bug disappears.

This is because whenever the popstate event is triggered, it will be fired on the event listeners in the order they were registered, hence the component using useRoutes will receive it first. That component will re-render, causing the children component using the other two hooks to re-render too. This is happening synchronously, before the children hooks get a chance to receive their own popstate event.

But since the useQueryParams hook does not keep a stable reference to the callback it passes to useLocationChange, the render loop being called on that component will cause a new callback to be passed, and the useEffect to trigger its clean up effect, which will unbind the popstate listener.

So when the event loop has finished the render and goes back to firing the remaining popstate event to the other listeners, the useQueryParams listener has already been unbound, and thus will not be triggered.

Now, what I am not clear about is why going forward in history is fine… And I’ll rather go to bed than investigate that!

[kyeotic]

Try raviger@rc or raviger@1.0.0-rc.3 and let me know