Simplify ws updating

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;

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,
   };

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<ReviewSegment[]>([
     "review",
     { limit: 10, severity: "alert" },
   ]);
 
-  const eventUpdate = useDeepMemo(reviewTopic);
-
   useEffect(() => {
     if (!eventUpdate) {
       return;