Filter and data have missing dependency

Question

I have one issue with my code where I need to filter though "id" and this is the error that I get " React Hook useEffect has missing dependencies: 'data' and 'filterData'. Either include them or remove the dependency array.

 useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content]);

 

 

Answer 1

You only declared content as dependency in your useEffect block, but you're actually using data (which is a prop) and filterData (which is coming from useState()) as well.

These are dependencies and the error message is saying you need to declare them too (meaning your useEffect block will be executed every time one of its dependencies changes) or to remove depencencies at all (meaning your useEffect block will be executed only once):

 useEffect(() => {
       if (content === "") {
         setFilterData(data); 
         return;
       }
    
       const filteredData = filterData.filter((item) => item.Id === content);
       setFilterData(filteredData);
     }, 
     [content, data, filterData] // or [] for no depencencies
 );