Simplify ws updating (#12390)

* Simplify ws updating

* Simplify return values

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;
@@ -206,18 +207,18 @@ export function useFrigateEvents(): { payload: FrigateEvent } {
   return { payload: JSON.parse(payload as string) };
 }
 
-export function useFrigateReviews(): { payload: FrigateReview } {
+export function useFrigateReviews(): FrigateReview {
   const {
     value: { payload },
   } = useWs("reviews", "");
-  return { payload: JSON.parse(payload as string) };
+  return useDeepMemo(JSON.parse(payload as string));
 }
 
-export function useFrigateStats(): { payload: FrigateStats } {
+export function useFrigateStats(): FrigateStats {
   const {
     value: { payload },
   } = useWs("stats", "");
-  return { payload: JSON.parse(payload as string) };
+  return useDeepMemo(JSON.parse(payload as string));
 }
 
 export function useInitialCameraState(
@@ -230,7 +231,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/components/navigation/Bottombar.tsx

@@ -48,7 +48,7 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
-  const { payload: latestStats } = useFrigateStats();
+  const latestStats = useFrigateStats();
 
   const { messages, addMessage, clearMessages } = useContext(
     StatusBarMessagesContext,

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/hooks/use-stats.ts

@@ -97,7 +97,7 @@ export function useAutoFrigateStats() {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
-  const { payload: latestStats } = useFrigateStats();
+  const latestStats = useFrigateStats();
 
   const stats = useMemo(() => {
     if (latestStats) {

web/src/views/live/LiveDashboardView.tsx

@@ -31,7 +31,6 @@ import { cn } from "@/lib/utils";
 import { LivePlayerError, LivePlayerMode } from "@/types/live";
 import { FaCompress, FaExpand } from "react-icons/fa";
 import { useResizeObserver } from "@/hooks/resize-observer";
-import useDeepMemo from "@/hooks/use-deep-memo";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -64,14 +63,12 @@ export default function LiveDashboardView({
 
   // recent events
 
-  const { payload: reviewTopic } = useFrigateReviews();
+  const eventUpdate = useFrigateReviews();
   const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
     "review",
     { limit: 10, severity: "alert" },
   ]);
 
-  const eventUpdate = useDeepMemo(reviewTopic);
-
   useEffect(() => {
     if (!eventUpdate) {
       return;

web/src/views/system/CameraMetrics.tsx

@@ -26,7 +26,7 @@ export default function CameraMetrics({
   );
 
   const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
-  const { payload: updatedStats } = useFrigateStats();
+  const updatedStats = useFrigateStats();
 
   useEffect(() => {
     if (initialStats == undefined || initialStats.length == 0) {

web/src/views/system/GeneralMetrics.tsx

@@ -40,7 +40,7 @@ export default function GeneralMetrics({
   );
 
   const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
-  const { payload: updatedStats } = useFrigateStats();
+  const updatedStats = useFrigateStats();
 
   useEffect(() => {
     if (initialStats == undefined || initialStats.length == 0) {