How to remove the warning?

Question

React

Plz tell me how to remove the warning?



I use useEffect

useEffect(() => {
        getTodo()
    }, [getTodo])

and the getTodo function

const getTodo = useCallback(async () => {
        try {
                await axios.get('/api/todo', {
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    params: {userId}
                })
                    .then((response) => {
                        setTodos(response.data)
                    })
        } catch (error) {
            console.log(error)
        }
    }, [userId, setTodos])

There seems to be a solution to a similar situation. https://habr.com/en/post/493496/
But, apparently, I'm doing something wrong, so I could not remove the error.

Answer 1

They forgot to add the most important thing from the example - the cleaning function. This is what the error tells you. Clear useEffect before unmounting the component.
in your useEffect at the very beginning, describe the variable, and assign the value false and at the very end add a callback return, this callback will work before the component is unmounted.
let cleanupFunction = false;
return () => cleanupFunction = true;

Answer 2

useEffect(() => {
  let stopGettingAfterUnmount = false;

  const getTodo = async () => {
    await axios
      .get("/api/todo", {
        headers: {
          "Content-Type": "application/json",
        },
        params: { userId },
      })
      .then((response) => {
        if (stopGettingAfterUnmount) return;

        setTodos(response.data);
      });
  };

  getTodo();

  return () => {
    stopGettingAfterUnmount = true;
  };
}, [userId]);