Nextjs electricsql double rerender
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 266
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 55
Description
Why does useLiveQuery re-render twice?
next config:
reactStrictMode: false,
package.json
"@tanstack/electric-db-collection": "^0.2.13",
"@tanstack/react-db": "^0.1.56",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"next": "^16.0.6",
import { electricCollectionOptions } from "@tanstack/electric-db-collection";
import { createCollection, useLiveQuery } from "@tanstack/react-db";
const workspaceContentCollection = useMemo(() => {
return createCollection(
electricCollectionOptions({
shapeOptions: {
id: "sync_workspace_content",
url: "http://localhost:4000/sync/workspace_content",
params: {
table: "workspace_content",
workspace_id: asyncParams.workspace_id,
},
headers: {
Authorization: `Bearer ${authToken}`,
},
},
getKey: (item) => item.id,
}),
);
}, [asyncParams.workspace_id]);
const {
data: workspace_content,
status,
isLoading,
} = useLiveQuery((q) =>
q
.from({ workspace_content: workspaceContentCollection })
.where(({ workspace_content }) =>
eq(workspace_content.workspace_id, BigInt(asyncParams.workspace_id)),
),
);
console.log("status");
console.log(status);
output:
status
loading
status
loading
status
ready
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Next.js component and compare the useLiveQuery status transitions against the listed @tanstack/react-db and @tanstack/electric-db-collection versions. Reproduce the loading/loading/ready sequence with reactStrictMode disabled, then trace the collection and query lifecycle to determine whether the duplicate render is expected. Done means the cause is documented and a regression test or clear reproduction result is available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100