fix: drag and drop not working on large rosters

another exhaustive deps fix that caused an infinite loop.
complexdatacollective · Feb 7, 2024 · 17bf8ba · 17bf8ba
1 parent 2f1e4c9
commit 17bf8ba
Showing 1 changed file with 37 additions and 36 deletions.
diff --git a/lib/interviewer/hooks/useSearch.js b/lib/interviewer/hooks/useSearch.js
@@ -1,10 +1,4 @@
-import {
-  useMemo,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from 'react';
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import Fuse from 'fuse.js';
 
 const MIN_QUERY_LENGTH = 1;
@@ -68,45 +62,52 @@ const useSearch = (list, options, initialQuery = '') => {
   const hasQuery = useMemo(() => query.length >= MIN_QUERY_LENGTH, [query]);
   const isLargeList = useMemo(() => list.length > 100, [list]);
 
-  const fuseOptions = useMemo(() => ({ ...defaultFuseOptions, ...options }), [options]);
+  const fuseOptions = useMemo(
+    () => ({ ...defaultFuseOptions, ...options }),
+    [options],
+  );
   const fuse = useMemo(() => new Fuse(list, fuseOptions), [list, fuseOptions]);
 
-  const search = useCallback((_query) => {
-    if (isLargeList) {
-      clearTimeout(delayRef.current);
-      setIsWaiting(true);
-    }
-
-    const res = fuse.search(_query);
-
-    const r = res.map(({ item, score }) => ({
-      ...item,
-      relevance: 1 - score, // fuseJS relevance is reverse nomalized (0 is perfect match)
-    }));
-
-    if (isLargeList) {
-      delayRef.current = setTimeout(() => {
-        setResults(r);
-        setIsWaiting(false);
-      }, DEBOUNCE_DELAY);
-      return;
-    }
-
-    setResults(r);
-    setIsWaiting(false);
-  }, [fuse, isLargeList]);
+  const search = useCallback(
+    (_query) => {
+      if (isLargeList) {
+        clearTimeout(delayRef.current);
+        setIsWaiting(true);
+      }
+
+      const res = fuse.search(_query);
+
+      const r = res.map(({ item, score }) => ({
+        ...item,
+        relevance: 1 - score, // fuseJS relevance is reverse nomalized (0 is perfect match)
+      }));
+
+      if (isLargeList) {
+        delayRef.current = setTimeout(() => {
+          setResults(r);
+          setIsWaiting(false);
+        }, DEBOUNCE_DELAY);
+        return;
+      }
+
+      setResults(r);
+      setIsWaiting(false);
+    },
+    [fuse, isLargeList],
+  );
 
   useEffect(() => {
     if (!hasQuery) {
       return;
     }
 
     search(query);
-  }, [query, hasQuery, search]);
+  }, [query, hasQuery]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const returnResults = useMemo(() => (
-    hasQuery ? results : list
-  ), [hasQuery, list, results]);
+  const returnResults = useMemo(
+    () => (hasQuery ? results : list),
+    [hasQuery, list, results],
+  );
 
   return [returnResults, query, setQuery, isWaiting, hasQuery];
 };