use useSWR data instead calling setState

website/src/components/FlaggableElement.tsx

@@ -22,7 +22,7 @@ import {
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
-import { useEffect, useReducer } from "react";
+import { useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
@@ -100,14 +100,12 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
   );
   const [isEditing, setIsEditing] = useBoolean();
 
-  const { data, isLoading } = useSWR("/api/valid_labels", get);
-  useEffect(() => {
-    if (isLoading) {
-      return;
-    }
-    const { valid_labels } = data;
-    updateReport({ type: "load_labels", labels: valid_labels });
-  }, [data, isLoading]);
+  useSWR("/api/valid_labels", get, {
+    onSuccess: (data) => {
+      const { valid_labels } = data;
+      updateReport({ type: "load_labels", labels: valid_labels });
+    },
+  });
 
   const { trigger } = useSWRMutation("/api/set_label", post, {
     onSuccess: () => {

website/src/components/Messages/MessageWithChildren.tsx

@@ -1,9 +1,8 @@
 import { Box, CircularProgress, Stack, StackProps, Text, TextProps, useColorModeValue } from "@chakra-ui/react";
-import { boolean } from "boolean";
-import { useState } from "react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { get } from "src/lib/api";
-import useSWR from "swr";
+import { Message } from "src/types/Conversation";
+import useSWRImmutable from "swr/immutable";
 
 const MessageHeaderProps: TextProps = {
   fontSize: "xl",
@@ -21,39 +20,24 @@ const MessageStackProps: StackProps = {
 interface MessageWithChildrenProps {
   id: string;
   depth?: number;
-  maxDepth?: number;
+  maxDepth: number;
   isOnlyChild?: boolean;
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
   const backgroundColor = useColorModeValue("white", "gray.800");
   const childBackgroundColor = useColorModeValue("gray.200", "gray.700");
+  const { id, depth = 0, maxDepth, isOnlyChild = true } = props;
 
-  const { id, depth, maxDepth, isOnlyChild = true } = props;
+  const { isLoading, data: message } = useSWRImmutable<Message>(`/api/messages/${id}`, get);
+  const { isLoading: isLoadingChildren, data: children = [] } = useSWRImmutable<Message[]>(
+    `/api/messages/${id}/children`,
+    get
+  );
 
-  const [message, setMessage] = useState(null);
-  const [children, setChildren] = useState(null);
-
-  const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, get, {
-    onSuccess: (data) => {
-      setMessage(data);
-    },
-    onError: () => {
-      setMessage(null);
-    },
-  });
-  const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, get, {
-    onSuccess: (data) => {
-      setChildren(data);
-    },
-    onError: () => {
-      setChildren(null);
-    },
-  });
-
-  const renderRecursive = maxDepth && ((depth && depth < maxDepth) || !depth);
-  const isFirst = depth === 0 || !depth;
-  const isFirstOrOnly = isFirst || boolean(isOnlyChild);
+  const renderRecursive = depth < maxDepth || depth === 0;
+  const isFirst = depth === 0;
+  const isFirstOrOnly = isFirst || !!isOnlyChild;
 
   if (isLoading || isLoadingChildren) {
     return <CircularProgress isIndeterminate />;
@@ -73,15 +57,15 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
           </Box>
         </>
       )}
-      {children && Array.isArray(children) && children.length > 0 ? (
-        renderRecursive ? (
+      {children.length > 0 &&
+        (renderRecursive ? (
           <Stack {...MessageStackProps}>
             <Box bg={childBackgroundColor} padding="4" borderRadius="xl">
-              {children.map((item, idx) => (
-                <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+              {children.map((item) => (
+                <Box flex="1" key={`recursiveMessageWChildren_${item.id}`}>
                   <MessageWithChildren
                     id={item.id}
-                    depth={depth ? depth + 1 : 1}
+                    depth={depth + 1}
                     maxDepth={maxDepth}
                     isOnlyChild={children.length === 1 && isOnlyChild}
                   />
@@ -110,10 +94,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
               </Box>
             </Stack>
           </>
-        )
-      ) : (
-        <></>
-      )}
+        ))}
     </>
   );
 }