How to fix missing dependency warning when using useEffect React Hook

Question

With React 16 8 6  it was good on previous version 16 8 3   I get this error when I attempt to prevent an infinite loop on a fetch request   src components BusinessesList js Line 51   React Hook useEffect has a missing dependency   fetchBusinesses   Either include it or remove the dependency array  react-hooks exhaustive-deps  I ve been unable to find a solution that stops the infinite loop  I want to stay away from using useReducer     I did find this discussion https   github com facebook react issues 14920 where a possible solution is You can always    eslint-disable-next-line react-hooks exhaustive-deps if you think you know what you re doing  I m not confident in what I m doing so I haven t tried implementing it just yet  I have this current setup React hook useEffect runs continuously forever infinite loop and the only comment is about useCallback   which I m not familiar with  How I m currently using useEffect    which I only want to run once in the beginning similar to componentDidMount    useEffect      gt        fetchBusinesses               const fetchBusinesses        gt        return fetch  quot theURL quot    method   quot GET quot                then res   gt  normalizeResponseErrors res          then res   gt            return res json                    then rcvdBusinesses   gt               some stuff                 catch err   gt               some error handling

User · Answer

Well if you want to look into this differently, you just need to know what are options does the React has that non exhaustive-deps? One of the reason you should not use a closure function inside the effect is on every render, it will be re-created/destroy again.

So there are multiple React methods in hooks that is considered stable and non-exhausted where you do not have to apply to the useEffect dependencies, and in turn will not break the rules engagement of react-hooks/exhaustive-deps. For example the second return variable of useReducer or useState which is a function.

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // non-exhausted, eslint won't nag about this
}, []);

So in turn you can have all your external dependencies together with your current dependencies coexist together within your reducer function.

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

User · Answer

just disable eslint for the next line   useEffect      gt       fetchBusinesses       eslint-disable-next-line           in this way you are using it just like a component did mount  called once   updated  or   const fetchBusinesses   useCallback      gt        your logic in here      someDeps    useEffect      gt       fetchBusinesses       no need to skip eslint warning     fetchBusinesses       fetchBusinesses will be called everytime someDeps will change

User · Answer

The solution is also given by react  they advice you use useCallback which will return a memoize version of your function       The  fetchBusinesses  function makes the dependencies of useEffect Hook  at line NN  change on every render  To fix this  wrap the  fetchBusinesses  definition into its own useCallback   Hook  react-hooks exhaustive-deps   useCallback is simple to use as it has the same signature as useEffect the difference is that useCallback returns a function  It would look like this     const fetchBusinesses   useCallback       gt            return fetch  theURL    method   GET              then      gt       some stuff            catch      gt       some error handling                deps           We have a first effect thant uses fetchBusinesses   useEffect      gt           do things and then fetchBusinesses     fetchBusinesses           fetchBusinesses          We can have many effect thant uses fetchBusinesses   useEffect      gt           do other things and then fetchBusinesses     fetchBusinesses          fetchBusinesses

User · Answer

You can set it directly as the useEffect callback  useEffect fetchBusinesses       It will trigger only once  so make sure all the function s dependencies are correctly set  same as using componentDidMount componentWillMount      Edit 02 21 2020 Just for completeness  1  Use function as useEffect callback  as above  useEffect fetchBusinesses       2  Declare function inside useEffect   useEffect      gt      function fetchBusinesses                   fetchBusinesses           3  Memoize with useCallback   In this case  if you have dependencies in your function  you will have to include them in the useCallback dependencies array and this will trigger the useEffect again if the function s params change  Besides  it is a lot of boilerplate    So just pass the function directly to useEffect as in 1  useEffect fetchBusinesses       const fetchBusinesses   useCallback      gt                 useEffect      gt      fetchBusinesses       fetchBusinesses    4  Disable eslint s warning useEffect      gt      fetchBusinesses             eslint-disable-line react-hooks exhaustive-deps

User · Answer

const  mount  setMount    useState false  const fetchBusinesses        gt          function defination   useEffect      gt       if  mount          setMount true         fetchBusinesses            fetchBusinesses      This is solution is pretty simple and you don t need to override es-lint warnings  Just maintain a flag to check whether component is mounted or not

User · Answer

you try this way const fetchBusinesses        gt        return fetch  quot theURL quot    method   quot GET quot                then res   gt  normalizeResponseErrors res          then res   gt            return res json                    then rcvdBusinesses   gt               some stuff                 catch err   gt               some error handling                 and useEffect      gt        fetchBusinesses           it s work for you  But my suggestion is try this way also work for you  It s better than before way  I use this way  useEffect      gt            const fetchBusinesses        gt        return fetch  quot theURL quot    method   quot GET quot                then res   gt  normalizeResponseErrors res          then res   gt            return res json                    then rcvdBusinesses   gt               some stuff                 catch err   gt               some error handling                        fetchBusinesses                   if you get data on the base of specific id then add in callback useEffect  id  then cannot show you warning  React Hook useEffect has a missing dependency   any thing   Either include it or remove the dependency array

User · Answer

Just pass the function as the argument in the array of useEffect    useEffect      gt       functionName       functionName

User · Answer

src components BusinessesList js Line 51   React Hook useEffect has a missing dependency   fetchBusinesses   Either include it or remove the dependency array  react-hooks exhaustive-deps   It s not JS React error but eslint  eslint-plugin-react-hooks  warning   It s telling you that hook depends on function fetchBusinesses  so you should pass it as dependency   useEffect      gt      fetchBusinesses        fetchBusinesses      It could result in invoking function every render if function is declared in component like   const Component        gt                   new function declaration every render   const fetchBusinesses        gt        fetch   api businesses           then             useEffect      gt        fetchBusinesses          fetchBusinesses                   because every time function is redeclared with new reference  Correct way of doing this stuff is   const Component        gt                    keep function reference   const fetchBusinesses   useCallback      gt        fetch   api businesses           then               additional dependencies          useEffect      gt        fetchBusinesses          fetchBusinesses                   or just defining function in useEffect  More  https   github com facebook react issues 14920

User · Answer

If you aren t using fetchBusinesses method anywhere apart from the effect  you could simply move it into the effect and avoid the warning  useEffect      gt        const fetchBusinesses        gt           return fetch  theURL    method   GET                then res   gt  normalizeResponseErrors res          then res   gt            return res json                    then rcvdBusinesses   gt               some stuff                 catch err   gt               some error handling                  fetchBusinesses              If however you are using fetchBusinesses outside of render  you must note two things   Is there any issue with you not passing fetchBusinesses as a method when it s used during mount with its enclosing closure  Does your method depend on some variables which it receives from its enclosing closure  This is not the case for you  On every render  fetchBusinesses will be re-created and hence passing it to useEffect will cause issues  So first you must memoize fetchBusinesses if you were to pass it to the dependency array    To sum it up I would say that if you are using fetchBusinesses outside of useEffect you can disable the rule using    eslint-disable-next-line react-hooks exhaustive-deps otherwise you can move the method inside of useEffect  To disable the rule you would write it like  useEffect      gt          other code               eslint-disable-next-line react-hooks exhaustive-deps

User · Answer

Add this comment on the top of your file to disable warning     eslint-disable react-hooks exhaustive-deps

User · Answer

These warnings are very helpful for finding components that do not update consistently  https   reactjs org docs hooks-faq html is-it-safe-to-omit-functions-from-the-list-of-dependencies   However  If you want to remove the warnings throughout your project  you can add this to your eslint config          plugins     react-hooks       rules          react-hooks exhaustive-deps   0

User · Answer

This article is a good primer on fetching data with hooks  https   www robinwieruch de react-hooks-fetch-data   Essentially  include the fetch function definition inside useEffect   useEffect      gt      const fetchBusinesses        gt        return fetch  theUrl                 your fetch implementation               fetchBusinesses

User · Answer

Actually the warnings are very useful when you develop with hooks  but in some cases  it can needle you  especially when you do not need to listen for dependencies change   If you don t want to put fetchBusinesses inside the hook s dependencies  you can simply pass it as an argument to the hook s callback and set the main fetchBusinesses as the default value for it like this  useEffect  fetchBusinesses   fetchBusinesses    gt       fetchBusinesses              It s not best practice but it could be useful in some cases    Also as Shubnam wrote  you can add below code to tell ESLint to ignore the checking for your hook      eslint-disable-next-line react-hooks exhaustive-deps

User · Answer

You can remove the 2nd argument type array    but the fetchBusinesses   will also be called every update  You can add an IF statement into the fetchBusinesses   implementation if you like   React useEffect      gt      fetchBusinesses          The other one is to implement the fetchBusinesses   function outside your component  Just don t forget to pass any dependency arguments to your fetchBusinesses dependency  call  if any   function fetchBusinesses  fetch      return fetch  theURL     method   GET          then res   gt  normalizeResponseErrors res        then res   gt  res json         then rcvdBusinesses   gt             some stuff             catch err   gt             some error handling            function YourComponent  props      const   fetch     props     React useEffect      gt        fetchBusinesses fetch         fetch

[reactjs] How to fix missing dependency warning when using useEffect React Hook?

Examples related to reactjs

Examples related to eslint

Examples related to create-react-app

Examples related to react-hooks