`useLiveQuery` isn't working properly with React Compiler

[pawelblaszczyk5]

Hello!

I'm playing with TanStack DB - awesome job, really excellent experience. Happy to test the early release and report some issues I stumbled upon.

Currently useLiveQuery isn't working properly with React Compiler enabled - it's not always updating correctly, especially when updating queries, mounting or optimistic mutations. When looked into the source code it seems like parts of useLiveQuery code breaks rules of React.

Is this something that's on your radar, or React Compiler compatibility isn't guaranteed? Thanks a lot in advance!

[samwillis]

Hey @pawelblaszczyk5 thanks for the report! I wasn't aware there were issues with React Compiler.

I've been working on some changes (fixing it to properly return a stable ref) to the react hook in this PR and it may fix it: #388

If you have a moment could you take a look and maybe test it?

[pawelblaszczyk5]

It seems it fixes it mostly 🤔 One issue left from these I found initially - if I don't preload the collection before rendering (currently using TanStack Start), It won't update after being loaded. It'll only update, when some mutation/remote update happens (using electric)

[samwillis]

Hmm, so it doesn't update on optimistic local changes, only when it receives remote changes?

I'll try and reproduce.

[pawelblaszczyk5]

Hmm, so it doesn't update on optimistic local changes, only when it receives remote changes?

I'll try and reproduce.

More like it doesn’t update on initial mount sync? I’m not sure how is it related to electric syncing. I can make reproduction too if you want - I basically have an app, just would need to extract something smaller from it so it’s not a pain for you

[samwillis]

Is the live query only using a single collection or joining across multiple? and is the collection empty or have anything in it?

A repo would be awesome

[samwillis]

I'm suspicious it could be something similar to the fix in another PR #390 - I need to create a reproduction and then test with both PRs 😬

[pawelblaszczyk5]

It’s just simple select all from one collection:

https://github.com/pawelblaszczyk5/bella/blob/5080f548abf3af4ec164ae9c34217277faf68bdf/apps/web/src/routes/app.index.tsx#L7

Linking the whole thing now, maybe it’ll be helpful - I’ll extract something smaller for you later today/tomorrow so it’s easier to manage

[samwillis]

Hey @pawelblaszczyk5

looking at your app you have this code:

export const addTodo = createOptimisticAction({
	mutationFn: async () => {
		await new Promise<void>((resolve) => {
			setTimeout(() => {
				resolve();
			}, 3_000);
		});

		return;
	},
	onMutate: (text: string) => {
		todoCollection.insert({ completed: true, id: TodoModel.fields.id.make(crypto.randomUUID().slice(0, 24)), text });
	},
});

the timeout with the resolve in the mutationFn without persisting to the backend will mean the local optimistic mutation will be dropped after 3s.

If that what you are seeing?

[pawelblaszczyk5]

Yeah, I'm aware here, that wast intentional just for checking optimistic mutations - will create a minimal reproduction tomorrow, thanks a lot!

[samwillis]

I'm fairly sure I managed to reproduce it, then fix it, in #395

[pawelblaszczyk5]

Hmm, so you've reproduced it and I no longer can reproduce it hahaha. It works now magically in both the whole app, and minimal reproduction that I created. Should we close it for now and I'll report it again in case of finding it not working again?

Also I extracted minimal tanstack DB/electric setup from one of your example projects, so if I have any other issue - I'll report it with proper reproduction. Sorry for trouble