frigate/web/src
Josh Hawkins 192aba901a
Some checks are pending
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions
Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386)
* refactor websockets to remove react-tracked

react 19 removed useReducer eager bailout, which broke react-tracked.

react-tracked works by wrapping state in a JavaScript Proxy. When a component reads state.someField, the proxy records that access. On the next state update, it compares only the fields each component actually touched and skips re-renders if those fields are unchanged. Under the hood, this relies on useReducer — and in React 18, useReducer had an "eager bail-out" that short-circuited rendering when the new state was === to the old state. React 19 removed that optimization, so every dispatch now schedules a render regardless, and the proxy comparison runs too late to prevent it.

useSyncExternalStore is a React primitive (added in 18, stable in 19) designed for exactly this pattern: subscribing to an external store:

useSyncExternalStore(
  subscribe,   // (listener) => unsubscribe — called when the store changes
  getSnapshot  // () => value — returns the current value for this subscriber
)

React calls getSnapshot during render and compares the result with Object.is. If the value is the same reference, the component bails out — no re-render. The key difference from react-tracked is that this bail-out is built into React's reconciler, not bolted on via proxy tricks and useReducer.

The per-topic subscription model makes this efficient. Instead of one global store where every subscriber has to check if their fields changed, each useWs("some/topic", ...) call subscribes only to that topic's listener set. When a message arrives for front_door/detect/state, only components subscribed to that exact topic get their listener fired → React calls their getSnapshot → Object.is compares the value → bail-out if unchanged. Components watching back_yard/detect/state are never even notified.

* remove react-tracked and react-use-websocket

* refactor usePolygonStates to use ws topic subscription

* fix TimeAgo refresh interval always returning 1s due to unit mismatch (seconds vs milliseconds)

older events now correctly refresh every minute/hour instead of every second

* simplify

* clean up

* don't resend onconnect

* clean up

* remove patch
2026-03-11 09:02:51 -05:00
..
api Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
components Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
context Update frontend to React 19 (#22275) 2026-03-05 07:42:38 -07:00
hooks Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
lib Support using GenAI for embeddings / semantic search (#22323) 2026-03-08 10:55:00 -05:00
pages Support using GenAI for embeddings / semantic search (#22323) 2026-03-08 10:55:00 -05:00
types Skip motion threshold configuration (#22255) 2026-03-05 18:20:03 -06:00
utils Frontend fixes (#22309) 2026-03-07 06:43:00 -07:00
views Add motion previews filter (#22347) 2026-03-09 14:14:13 -06:00
App.tsx Frontend fixes (#22309) 2026-03-07 06:43:00 -07:00
env.ts Fix linter and fix lint issues (#10141) 2024-02-28 16:23:56 -06:00
index.css Improve live streaming (#16447) 2025-02-10 09:42:35 -07:00
login.tsx Fix auth when serving Frigate at a subpath (#12815) 2024-08-09 07:26:26 -06:00
main.tsx feat: add i18n (translation/localization) (#16877) 2025-03-16 10:36:20 -05:00
vite-env.d.ts switch to vite 2022-03-11 07:49:06 -06:00