fix: add missing deps and search limit

1 files changed, 6 insertions, 5 deletions

diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index 2be8f6f..365f33b 100644
--- a/src/components/Header/SearchBar.tsx
+++ b/src/components/Header/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import {
   InputBase,
@@ -18,6 +18,7 @@ interface PropTypes {
 }
 
 const INTERVAL = 300;
+const LIMIT = 7;
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -47,19 +48,19 @@ const SearchBar: React.FC<PropTypes> = ({ navigate }) => {
     setTimeout(() => setIsReady(true), INTERVAL);
   };
 
-  const fetchPolls = () => {
+  const fetchPolls = useCallback(() => {
     sleep();
-    get(`/users?username[$regex]=${query}`).then(response => {
+    get(`/users?username[$regex]=${query}&$limit=${LIMIT}`).then(response => {
       setResults(response.data);
     });
-  };
+  }, [query]);
 
   useEffect(() => {
     if (isReady && shouldRefetch) {
       fetchPolls();
       setShouldRefetch(false);
     }
-  }, [isReady]);
+  }, [isReady, fetchPolls, shouldRefetch]);
 
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {