diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx index f68d2b4a3..02acd7c7d 100644 --- a/web/src/api/ws.tsx +++ b/web/src/api/ws.tsx @@ -11,6 +11,7 @@ import { import { FrigateStats } from "@/types/stats"; import useSWR from "swr"; import { createContainer } from "react-tracked"; +import useDeepMemo from "@/hooks/use-deep-memo"; type Update = { topic: string; @@ -210,14 +211,16 @@ export function useFrigateReviews(): { payload: FrigateReview } { const { value: { payload }, } = useWs("reviews", ""); - return { payload: JSON.parse(payload as string) }; + const review = useDeepMemo(JSON.parse(payload as string)); + return { payload: review }; } export function useFrigateStats(): { payload: FrigateStats } { const { value: { payload }, } = useWs("stats", ""); - return { payload: JSON.parse(payload as string) }; + const stats = useDeepMemo(JSON.parse(payload as string)); + return { payload: stats }; } export function useInitialCameraState( @@ -230,7 +233,8 @@ export function useInitialCameraState( value: { payload }, send: sendCommand, } = useWs("camera_activity", "onConnect"); - const data = JSON.parse(payload as string); + + const data = useDeepMemo(JSON.parse(payload as string)); useEffect(() => { let listener = undefined; diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts index 815bd12f3..7b6128ace 100644 --- a/web/src/hooks/use-camera-activity.ts +++ b/web/src/hooks/use-camera-activity.ts @@ -27,13 +27,10 @@ export function useCameraActivity( // init camera activity - const { payload: initialCameraState } = useInitialCameraState( + const { payload: updatedCameraState } = useInitialCameraState( camera.name, revalidateOnFocus, ); - - const updatedCameraState = useDeepMemo(initialCameraState); - useEffect(() => { if (updatedCameraState) { setObjects(updatedCameraState.objects); @@ -140,7 +137,7 @@ export function useCameraActivity( activeTracking: hasActiveObjects, activeMotion: detectingMotion ? detectingMotion === "ON" - : initialCameraState?.motion === true, + : updatedCameraState?.motion === true, objects, offline, }; diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx index 06b238689..a70783410 100644 --- a/web/src/views/live/LiveDashboardView.tsx +++ b/web/src/views/live/LiveDashboardView.tsx @@ -64,14 +64,12 @@ export default function LiveDashboardView({ // recent events - const { payload: reviewTopic } = useFrigateReviews(); + const { payload: eventUpdate } = useFrigateReviews(); const { data: allEvents, mutate: updateEvents } = useSWR([ "review", { limit: 10, severity: "alert" }, ]); - const eventUpdate = useDeepMemo(reviewTopic); - useEffect(() => { if (!eventUpdate) { return;