Initial store data is components is always `null`, then loads + re-renders second time to a correct value automatically

This isn’t the end of the world, as I can currently wrap every single component and every store value in an if check to see if the data has actually been loaded, but what seems to be happening is that all components mount and render twice – once with an empty store and then one with the “real” value.

Has anyone seen/heard of this behavior before and have any idea what might be behind it/how to debug? Thank you =)

const Table = () => {
	const db = useStoreState(state => state.db)
	const tables = useStoreState(state => state.tables.entries)
	const { name } = useParams()

	console.log("[TABLE COMPONENT]")
	console.log("DB:", db)
	console.log("TABLES:", tables)

	if (!tables || !db) return null

	const table = tables.find(it => it.table_name == name)
	const columns = table?.columns
		.map(it => it.column_name)
		.map(name => ({ Header: name, accessor: name }))

	const req = useQuery(`/table/${name}`, () =>
		db.selectRows(makeRowSelectArgs(table, { limit: 100 }))
	)

	switch (req.status) {
		case "loading":
			return <h1>Loading Tables...</h1>
		case "error":
			return <h1>Error fetching tables: {req.error.message}</h1>
		case "success":
			return <TableComp columns={columns} data={req.data} />
	}
}

Without if (!tables || !db) return null (or equivalent on every component) this happens:

[ctrlplusb]

I’ll let you know when the patches are released for test.

[aalpgiray]

We are on it. But of course, there are breaking changes. Hope we can do it soon. I’ll let you know. Thanks again.