How to fix this "React Hook useEffect has a missing dependency" warning?

Question

Here's my file:

// useFetcher.js
import { useEffect, useState } from "react";

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  async function loadData() {
    try {
      setLoading(true);
      const actionData = await action();
      setData(actionData);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    loadData();
  }, [action]);
  return [data, loading, error];
}

On line 21, eslint complaints that:

React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps)

How can I fix this?

When you set state after async function finishes you should check if the component is mounted before you set the state — HMR
– HMR, Commented Oct 1, 2019 at 18:52

Clarity · Accepted Answer · 2019-10-01 15:29:16Z

1

The best way here would be to define your async function inside the useEffect:

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);
        const actionData = await action();
        setData(actionData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [action]);
  return [data, loading, error];
}

More info in the docs.

edited Oct 1, 2019 at 15:29

answered Oct 1, 2019 at 15:24

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

3 Comments

Paul Razvan Berg Over a year ago

Interesting. I'm new to hooks, is there any documentation on this block scoping?

Clarity Over a year ago

I highly recommend reading this post by D.Abramov: overreacted.io/a-complete-guide-to-useeffect

Paul Razvan Berg Over a year ago

"If you’re not comfortable with deep dives, you might want to wait until these explanations appear elsewhere. Just like when React came out in 2013, it will take some time for people to recognize a different mental model and teach it." Love the post so far!

complexSandwich · Accepted Answer · 2019-10-01 15:22:26Z

0

Add the loadData function to the array in your useEffect. This will get rid of the complaint:

useEffect(() => {
  loadData();
}, [action, loadData]);

answered Oct 1, 2019 at 15:22

complexSandwich

6052 gold badges16 silver badges27 bronze badges

3 Comments

Paul Razvan Berg Over a year ago

Now it tells me

The 'loadData' function makes the dependencies of useEffect Hook (at line 21) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'loadData' definition into its own useCallback() Hook

Paul Razvan Berg Over a year ago

If I move loadData inside the callback of useEffect, the warning disappears. I'm new to hooks, Is this good practice?

HMR Over a year ago

A good linter will tell you that's of no use unless loadData came from a useCallback that has action as a dependency. If you use vscode with eslint plugin and an app created with latest create-react-app you would see the error.

Collectives™ on Stack Overflow

How to fix this "React Hook useEffect has a missing dependency" warning?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related