React Hook useEffect has a missing dependency: 'evaluate'. Either include it or remove the dependency array

user_17262149 0
Viewed 55

How to add the code together in the useEffect? I cannot seem to find the solution.

const evaluate = () => {
     const [first, second] = openCards;
     enable();
     if (cards[first].type === cards[second].type) {
       setClearedCards((prev) => ({ ...prev, [cards[first].type]: true }));
       setOpenCards([]);
       return;
     }

To the useEffect:

useEffect(() => {
      console.log(openCards);
      let timeout = null;
      if (openCards.length === 2) {
        timeout = setTimeout(evaluate, 300);
      }
      return () => {
        clearTimeout(timeout);
      };
    }, [openCards]);
reactjs
1 Answers

If you don't include it in the dependency array (second arg of useEffect) it won't update when evaluate changes.

// use useCallback to make sure evaluate is only a new 
// closure every it's dependencies change. 
// Keep in mind `() => {} != () => {}`
const evaluated = useCallback(() => {
     const [first, second] = openCards;
     enable();
     if (cards[first].type === cards[second].type) {
       setClearedCards((prev) => ({ ...prev, [cards[first].type]: true }));
       setOpenCards([]);
       return;
     }), [openCards, cards, setClearedCards, setOpenCards])

useEffect(() => {
      console.log(openCards);
      let timeout = null;
      if (openCards.length === 2) {
        timeout = setTimeout(evaluate, 300);
      }
      return () => {
        clearTimeout(timeout);
      };
    }, [openCards, evalute]); // Add it here
user_124174830
Related