useLiveQuery breaks when using react strictmode

[SemStassen]

I am making an app using a similar loading pattern to the LinearLite example.

However the usage of useLiveQuery with liveShapes as in the example does not seem to work in my current setup.

 loader: async ({ request }) => {
          const supabase = createBrowserClient();
          const { data } = await supabase.auth.getSession();

          if (!data.session) {
            return redirect("/login");
          }

          const liveUserPreferences = await pg.live.query({
            query: db.query.userPreferences.findMany().toSQL().sql,
            params: [],
            signal: request.signal,
            offset: 0,
            limit: 1,
          });

          return { liveUserPreferences };
        },

function Page() {
  const { liveUserPreferences } = useLoaderData();
  const userPreferences = useLiveQuery(liveUserPreferences);

  return (
    <div className="max-w-[750px] w-full mx-auto px-6">
      HTML
    </div>
  );
}

The above useLiveQuery gives the following error: Live query is no longer active and cannot be subscribed to

I can't seem to figure out why this is, maybe someone else does!

Tyty

[samwillis]

Hey @SemStassen

That seems confusing, its essentially identical code to in Linearlite 🤔

First thing to try is disabling React strict mode, let's just double check that it's not causing the shape to unsubscribe on the second render.

If that doesn't work, could you note down the versions of react, react-router, and the pglite packages you are using? I'll then cross check that with Linearlite and try out if it's a version issue, see if we can reproduce it.

[SemStassen]

@samwillis

Thank you for the great advice!

React strict mode seems to be the issue! I disabled it and now it works perfectly. (Besides HMR seeming to cause more of the same)

Should I open an issue for liveQuery subscriptions not working in strict-mode?