Move PWA registration into useEffect to avoid render-phase side effects

registerSW() and setUpdateSW() were being called during component render,
which triggers a state update during rendering and can cause infinite
re-render loops. This also caused the Playwright E2E tests to fail since
they block service workers and the render-phase side effect destabilizes
React hydration.

Move both calls into a useEffect that runs once on mount, gated on
import.meta.env.PROD.
This commit is contained in:
amoussa1229 2026-07-02 01:29:52 +00:00
parent e3d26d3c26
commit 514f07cc11

View file

@ -1,5 +1,5 @@
import { StartClient } from "@tanstack/react-start/client"
import { StrictMode, useState } from "react"
import { StrictMode, useEffect, useState } from "react"
import { hydrateRoot } from "react-dom/client"
import { registerSW } from "virtual:pwa-register"
@ -15,14 +15,15 @@ function PwaUpdateProvider() {
const [needRefresh, setNeedRefresh] = useState(false)
const [updateSW, setUpdateSW] = useState<(() => Promise<void>) | undefined>(undefined)
if (import.meta.env.PROD) {
useEffect(() => {
if (!import.meta.env.PROD) return
const updateSWRef = registerSW({
onNeedRefresh() {
setNeedRefresh(true)
},
})
setUpdateSW(() => updateSWRef)
}
}, [])
return (
<PwaUpdateToast