Adding missing dependency in useEffect causes recursive loop

Question

When I try to run code like below, I get the eslint warning React Hook useEffect has a missing dependency: 'userApi'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

const userApi = useFetch();

useEffect(() => {
  userApi.run("/api/user");
}, []);

But if I add userApi as dependency, then I get a recursive loop. If I ignore the warning everything is fine. Should I just ignore it?

Here is my useFetch hook:

const useFetch = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const auth = useAuth();

  const run = async (url, method = "GET", data, options) => {
    setError();
    setIsLoading(true);
    try {
      const token = await auth.user.getIdToken();

      if (!options)
        options = {
          method,
          headers: {
            "Content-Type": "application/json"
          }
        };

      if (!options.headers) options.headers = {};
      if (!options.headers["Authorization"])
        options.headers["Authorization"] = `Bearer ${token}`;

      if (!options.body && data) options.body = JSON.stringify(data);

      const response = await fetch(url, options);
      console.log(response);
      if (!response.ok) throw Error(response.statusText);
      const json = await response.json();
      setData(json);
    } catch (e) {
      console.log(e);
      setError(e.message);
    }
    setIsLoading(false);
  };

  return { data, error, isLoading, run };
};

Update, my working code:

const [getUser, { data: user, error, loading }] = useFetch("/api/user");

useEffect(() => {
  getUser();
}, [getUser]);

The fetch hook:

const useFetch = (url, method = "GET") => {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const { user } = useAuth();

    const run = useCallback(
        async (data, options) => {
          ...code...
        },
        [user, method, url]
    );
    return [run, { data, error, loading }];
};

Mohamed Ramrami · Accepted Answer · 2019-10-01 17:40:17Z

2

You can fix the problem by updating the useFetch code (and maybe useAuth also) by adding some memoization using useMemo and useCallback, something like this :

const useFetch = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const auth = useAuth(); // probably should update useAuth also

  // preserve the `run` reference between renders
  const run = useCallback(async (url, method = "GET", data, options) => {
    // your code ...
  }, [auth.user]);

  // preserve the object reference between renders
  return useMemo(
    () => ({ data, error, isLoading, run }), 
    [data, error, isLoading, run]
  );
};

And

  // Use the function `run` directly in case the object from `useFetch` has changed (e.g when data change)
  const { run } = useFetch(); 

  useEffect(() => {
    run("/api/user");
  }, [run]);

answered Oct 1, 2019 at 17:40

Mohamed Ramrami

12.8k4 gold badges41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

r03 Over a year ago

Thanks, that works. The only downside is that userApi.run was nicer to use and read for me. (Sometimes I have multiple useFetch hooks in a single component)

r03 Over a year ago

I can still use userApi.run instead of run with userApi.run as dependency, but then eslint checker still complains about it. I think the linter is not smart enough in this case.

Mohamed Ramrami Over a year ago

You can alias it when destructuring the object : const { run: userApiRun } = useFetch();

Collectives™ on Stack Overflow

Adding missing dependency in useEffect causes recursive loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related