Potential mistake in `useEffect` in todo-app example?

[nikelborm]

synchrotron/examples/todo-app/src/db/electric.tsx

Lines 15 to 30 in a0ba9fe

	const loadTodos = () => {
	console.log(`loadTodos starting live query`)
	db.extensions.live.query<Todo>("select * from todos order by text").then((todos) => {
	try {
	setTodos(todos.initialResults.rows)
	const callback = (newTodos: LiveQueryResults<Todo>) => {
	console.log(`live query todos got new rows`, newTodos.rows)
	setTodos(newTodos.rows)
	}
	todos.subscribe(callback)
	return () => todos.unsubscribe(callback)
	} catch (e) {
	console.error(`Error setting up live query for todos`, e)
	}
	})
	}

Hi! Your project is very interesting to me and I think I want to write something fun using it. I was looking at the code and wanted to clarify a little thing. I know that devs can return cleanup function from useEffect, but what's confusing to me is that you return it from db.extensions.live.query asynchronous callback.

Did you mean to write something like this?

const loadTodos = () => {
	let unsubscriber: () => void = () => {};

	console.log(`loadTodos starting live query`)
	db.extensions.live.query<Todo>("select * from todos order by text").then((todos) => {
		try {
			setTodos(todos.initialResults.rows)
			const callback = (newTodos: LiveQueryResults<Todo>) => {
				console.log(`live query todos got new rows`, newTodos.rows)
				setTodos(newTodos.rows)
			}
			todos.subscribe(callback)
			unsubscriber = () => todos.unsubscribe(callback)
		} catch (e) {
			console.error(`Error setting up live query for todos`, e)
		}
	})
	return () => unsubscriber()
}

[evelant]

Yep it looks like an oversight in the example. Sorry the examples are a bit messy. I haven't had much time to work on this since the initial version. It's basically only proof-of-concept quality at the moment so there's some messy stuff, debug code, and so on. I think the pattern holds promise however, I'd love to develop it further, but haven't had time yet because unfortunately I can't actually use it in my own project. My main work uses react-native which can't run pglite yet. I'll likely adopt and develop this further as soon as it's possible to run pglite on react native.