Usage with WindowHistoryAdapter - Components don't rerender when params change

[websaid]

Im trying to keep it short, will go more into detail if the awnser is no:

Im using in a react app (without React-Router) the WindowHistoryAdapter and my components dont rerender if the matching query param changes. Is this supposed to be like that?

Thanks for any assistance!

[websaid]

Ok I found a way to solve this, I made some adjustments to the WindowHistoryAdapter.

Now when the query params are being changed, every component which uses for example useQueryParams will rerender, regardless if the particular used query param has changed. Therefore be careful when using this, it could potentially cause a lot of unnecessary rerenders.

I still don't know if there is a proper way, might be that this solution is not necessary/good at all.

import { useEffect, useState } from "react";
import { PartialLocation, QueryParamAdapterComponent } from "use-query-params";

function makeAdapter({ onChange }: { onChange: () => void }) {
  const adapter = {
    replace(location: PartialLocation) {
      window.history.replaceState(location.state, "", location.search || "?");
      onChange();
    },
    push(location: PartialLocation) {
      window.history.pushState(location.state, "", location.search || "?");
      onChange();
    },
    get location() {
      return window.location;
    },
  };

  return adapter;
}

/**
 * Adapts standard DOM window history to work with our
 * { replace, push } interface.
 */
export const RerenderingWindowHistoryAdapter: QueryParamAdapterComponent = ({
  children,
}) => {
  const refreshAdapter = () =>
    setAdapter(makeAdapter({ onChange: refreshAdapter }));

  const [adapter, setAdapter] = useState(
    makeAdapter({ onChange: refreshAdapter })
  );
  useEffect(() => {
    const handlePopState = () => {
      refreshAdapter();
    };

    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);

  return children(adapter);
};

[Dragomir-Ivanov]

Hi @websaid. Thank you for your efforts.
I am stuck with the same problem as you, but my fear is that the solution here is too hard on performance.
I was wondering if you managed to find something more optimal in the meantime. I find it strange that given that we have <QueryParamsProvider> as a central point, it can't coordinate hooks activation, so you need to do that on an adapter level.

Thanks again mate!

[websaid]

Hi, glad that gave you some guidance. I haven't pushed this further than this, this is still the solution I use. In my case the provider isn't wrapped around the whole App, so the performance impact is not that immense. If you find a better solution tho, please keep me informed. 🙌

[Dragomir-Ivanov]

I will play a bit with something along the lines of React's useSyncExternalStore() and will ping you, if I manage to think of something.

[Dragomir-Ivanov]

Hi @websaid
I have managed to fix the issue, without needed adapter changes. However I am starting to doubt if I need to react on self changes from useQueryParams, or I should duplicate the state in a local useState/MobX store and just call useQueryParams setter.

The project source code is rather convoluted, I don't understand why things are implemented the way they are, so my solution may not be the best. You can expand on it if you want. Just keep me posted.

You can find the code here:
https://github.com/Dragomir-Ivanov/use-query-params/