fixed react warnings

frontend/src/components/Saved.js

-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FaQuestionCircle } from "react-icons/fa";
 
 import { SavedInfo } from "./SavedInfo";

frontend/src/components/SavedInfo.js

-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import UIkit from "uikit";
 
 import { flatten } from "../utils/flatScores";

frontend/src/components/Summarize.js

-import isURL from "is-url";
-import React, { useCallback, useContext, useEffect, useMemo, useReducer, useState } from "react";
+import React, { useCallback, useContext, useMemo, useReducer, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 
 import { feedbackRequest, summarizeRequest } from "../api";
@@ -216,7 +215,7 @@ const generateStatistics = (text, summaryMarkup) => {
 };
 
 const Summary = ({ markup, summary, markupState, scrollState, showMarkup }) => {
-  const { originalText, summaryText } = summary;
+  const { originalText } = summary;
   const { numWords, percentOverlap } = generateStatistics(originalText, markup[1]);
 
   return (

frontend/src/components/Visualize.js

@@ -246,7 +246,7 @@ const VisualizeContent = ({ doc, reference, models }) => {
     if (slot === null) return null
     if (referenceSelected) return reference
     return models[slot][1]
-  }, [slot])
+  }, [slot, models, reference, referenceSelected])
 
   const [docMarkup, refMarkup] = useMarkup(doc, ref)
   const markupState = useState(null);

frontend/src/components/utils/Markup.js

-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, memo, useCallback, useEffect, useRef, useState } from "react";
 
 const innerHoverStyle = { background: "yellow", color: "black", display: "relative" };
 const baseMarkupStyle = {
@@ -12,7 +12,7 @@ const outerHoverStyle = { ...baseMarkupStyle, ...innerHoverStyle };
 const initScrollState = [null, null, null];
 const useMarkupScroll = () => {
   const [scrollState, setScrollState] = useState(initScrollState);
-  const resetScrollState = useCallback(() => setScrollState(initScrollState));
+  const resetScrollState = useCallback(() => setScrollState(initScrollState), [setScrollState]);
   return [scrollState, setScrollState, resetScrollState];
 };
 
@@ -31,7 +31,7 @@ const Scroll = ({ docIndex, matchOrder, groupSizes, tag, scrollState, allowScrol
     if (docIndex === scrollMarkup[0] && tag === scrollMarkup[1] && matchOrder === scrollMarkup[2]) {
       scrollRef.current.scrollIntoView({ block: "center", behavior: "smooth", inline: "start" });
     }
-  }, [scrollMarkup, docIndex, matchOrder]);
+  }, [tag, scrollMarkup, docIndex, matchOrder]);
   return (
     <span ref={scrollRef} onClick={scrollNext}>
       {children}
@@ -84,11 +84,11 @@ const StringContent = memo(({ content }) => {
   return (
     <span>
       <>{lines[0]}</>
-      {lines.slice(1).map((line) => (
-        <>
+      {lines.slice(1).map((line, i) => (
+        <Fragment key={i}>
           <br />
           {line}
-        </>
+        </Fragment>
       ))}
     </span>
   );
@@ -96,10 +96,9 @@ const StringContent = memo(({ content }) => {
 
 const MarkupRoot = ({ markups, markupState, scrollState, allowScroll, showMarkup }) => (
   <>
-    {markups.map((child, i) =>
-      typeof child === "string" ? (
-        <StringContent key={i} content={child} />
-      ) : (
+    {markups.map((child, i) => {
+      if (typeof child === "string") return <StringContent key={i} content={child} />;
+      return (
         <TaggedMarkup
           key={i}
           markup={child}
@@ -108,8 +107,8 @@ const MarkupRoot = ({ markups, markupState, scrollState, allowScroll, showMarkup
           allowScroll={allowScroll}
           showMarkup={showMarkup}
         />
-      )
-    )}
+      );
+    })}
   </>
 );
 

frontend/src/contexts/SettingsContext.js

@@ -14,12 +14,12 @@ const SettingsProvider = ({ children }) => {
     const newValue = !allowSelfSimilarities
     setAllowSelfSimilarities(newValue);
     storeAllowSelfSimilarities(newValue);
-  });
+  }, [allowSelfSimilarities, setAllowSelfSimilarities]);
   const setMinOverlap = useCallback((overlap) => {
     const newOverlap = typeof overlap === "string" ? parseInt(overlap, 10) : overlap
     _setMinOverlap(newOverlap);
     storeMinOverlap(newOverlap);
-  });
+  }, [_setMinOverlap]);
   return (
     <SettingsContext.Provider value={{ minOverlap, setMinOverlap, allowSelfSimilarities, toggleAllowSelfSimilarities }}>
       {children}