Question: UI Freezing When Using useLiveQuery Conditionally (Tanstack DB + Electric Collections)

[AlmAnderson]

I can only assume others have run into this random UI freezing so I'm hoping someone knows why exactly and how to avoid it.

This is my best guess:

I’m seeing UI freezing when using useLiveQuery. I "think" the issue happens when the component only calls the hook once the collection is available (i.e., the hook call is conditional).

Maybe the collections need to be pre-initialized at the root of the app and awaited before the first paint? I can't find any documentation that instructs this.

When the app starts, the collection isn’t available immediately. Once it does become available, calling the hook conditionally causes it to subscribe → unsubscribe → resubscribe during initial renders. That triggers multiple rapid state updates and re-renders, which leads to the UI freezing for a few seconds.

This appears to be made more noticeable because Electric collections load data in chunks, so several updates arrive close together during initial sync, multiplying the re-render cost.

Workaround
Calling the hook unconditionally, and returning null until the collection exists, avoids the subscription churn:
const result = useLiveQuery((q) => { if (!collection) return null; // no-op until data is ready return q.from({ t: collection }).select(({ t }) => ({ ...t })); });

After switching to this, the UI freeze appears to have gone away (hopefully).

⸻

Questions
• Is this the intended pattern for useLiveQuery?
• Should live queries be safe to call conditionally, or is always-call-then-disable the expected approach?
• Is there recommended guidance for handling Electric’s chunked sync behavior during initial load?
• Has anyone created a helper like useSafeLiveQuery to standardize this pattern?

⸻

Thanks — just trying to confirm whether this is the correct usage pattern or if there’s a smoother way to handle collection initialization + rendering. Maybe I'm totally wrong or confused here but I believe this is what's happening. It just seems like an issue almost anyone would run into so I assume there would be either more safety built right into the electric collection / useLiveQuery, or I'm completely missing something obvious.

[KyleAMathews]

The chunked sync is a red herring -- electric collections don't render until all the data is loaded.

Do you want to wait to render until data is loaded? Normally you either away collection.preload() in a loader or use useLiveSuspenseQuery https://tanstack.com/db/latest/docs/overview#uselivesuspensequery-hook