mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-12 11:27:34 +03:00
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
* 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
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { baseUrl } from "./baseUrl";
|
|
import { SWRConfig } from "swr";
|
|
import { WsProvider } from "./WsProvider";
|
|
import axios from "axios";
|
|
import { ReactNode } from "react";
|
|
import { isRedirectingToLogin, setRedirectingToLogin } from "./auth-redirect";
|
|
|
|
axios.defaults.baseURL = `${baseUrl}api/`;
|
|
|
|
type ApiProviderType = {
|
|
children?: ReactNode;
|
|
options?: Record<string, unknown>;
|
|
};
|
|
|
|
export function ApiProvider({ children, options }: ApiProviderType) {
|
|
axios.defaults.headers.common = {
|
|
"X-CSRF-TOKEN": 1,
|
|
"X-CACHE-BYPASS": 1,
|
|
};
|
|
|
|
return (
|
|
<SWRConfig
|
|
value={{
|
|
fetcher: (key) => {
|
|
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
|
return axios.get(path, { params }).then((res) => res.data);
|
|
},
|
|
onError: (error, _key) => {
|
|
if (
|
|
error.response &&
|
|
[401, 302, 307].includes(error.response.status)
|
|
) {
|
|
// redirect to the login page if not already there
|
|
const loginPage = error.response.headers.get("location") ?? "login";
|
|
if (window.location.href !== loginPage && !isRedirectingToLogin()) {
|
|
setRedirectingToLogin(true);
|
|
window.location.href = loginPage;
|
|
}
|
|
}
|
|
},
|
|
...options,
|
|
}}
|
|
>
|
|
<WsWithConfig>{children}</WsWithConfig>
|
|
</SWRConfig>
|
|
);
|
|
}
|
|
|
|
type WsWithConfigType = {
|
|
children: ReactNode;
|
|
};
|
|
|
|
function WsWithConfig({ children }: WsWithConfigType) {
|
|
return <WsProvider>{children}</WsProvider>;
|
|
}
|
|
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
export function useApiHost() {
|
|
return baseUrl;
|
|
}
|