React Hook Warnings for async function in useEffect useEffect function must return a cleanup function or nothing

Question

I was trying the useEffect example something like below  useEffect async      gt        try           const response   await fetch  https   www reddit com r   subreddit  json            const json   await response json            setPosts json data children map it   gt  it data          catch  e            console error e                  and I get this warning in my console  But the cleanup is optional for async calls I think  I am not sure why I get this warning   Linking sandbox for examples  https   codesandbox io s 24rj871r0p

User · Answer

For other readers  the error can come from the fact that there is no brackets wrapping the async function   Considering the async function initData    async function initData           This code will lead to your error     useEffect      gt  initData           But this one  won t     useEffect      gt    initData               Notice the brackets around initData

User · Answer

When you use an async function like  async      gt        try           const response   await fetch  https   www reddit com r   subreddit  json            const json   await response json            setPosts json data children map it   gt  it data          catch  e            console error e             it returns a promise and useEffect doesn t expect the callback function to return Promise  rather it expects that nothing is returned or a function is returned   As a workaround for the warning you can use a self invoking async function   useEffect      gt         async function             try               const response   await fetch                   https   www reddit com r   subreddit  json                             const json   await response json                setPosts json data children map it   gt  it data              catch  e                console error e                                 or to make it more cleaner you could define a function and then call it  useEffect      gt        async function fetchData             try               const response   await fetch                   https   www reddit com r   subreddit  json                             const json   await response json                setPosts json data children map it   gt  it data              catch  e                console error e                        fetchData              the second solution will make it easier to read and will help you write code to cancel previous requests if a new one is fired or save the latest request response in state  Working codesandbox

User · Answer

void operator could be used here  Instead of  React useEffect      gt        async function fetchData               fetchData             or React useEffect      gt         async function fetchData                       you could write  React useEffect      gt        void async function fetchData                       It is a little bit cleaner and prettier   Async effects could cause memory leaks so it is important to perform cleanup on component unmount  In case of fetch this could look like this  function App         const   data  setData     React useState           React useEffect      gt            const abortController   new AbortController            void async function fetchData                 try                   const url    https   jsonplaceholder typicode com todos 1                   const response   await fetch url    signal  abortController signal                     setData await response json                   catch  error                    console log  error   error                                      return      gt                abortController abort       cancel pending fetch request on component unmount                             return  lt pre gt  JSON stringify data  null  2   lt  pre gt

User · Answer

Please try this  useEffect      gt             async      gt              const products   await api index             setFilteredProducts products            setProducts products

User · Answer

try   x000D   x000D  const MyFunctionnalComponent  React FC   props   gt    x000D    useEffect      gt    x000D         Using an IIFE x000D       async function anyNameFunction     x000D        await loadContent    x000D            x000D            x000D    return  lt div gt  lt  div gt   x000D     x000D   x000D   x000D

User · Answer

I suggest to look at Dan Abramov  one of the React core maintainers  answer here   I think you re making it more complicated than it needs to be   function Example       const  data  dataSet    useState lt any gt  null     useEffect      gt        async function fetchMyAPI           let response   await fetch  api data         response   await response json         dataSet response             fetchMyAPI               return  lt div gt  JSON stringify data   lt  div gt      Longer term we ll discourage this pattern because it encourages race conditions  Such as     anything could happen between your call starts and ends  and you could have gotten new props  Instead  we ll recommend Suspense for data fetching which will look more like  const response   MyAPIResource read      and no effects  But in the meantime you can move the async stuff to a separate function and call it   You can read more about experimental suspense here   If you want to use functions outside with eslint   function OutsideUsageExample       const  data  dataSet    useState lt any gt  null     const fetchMyAPI   useCallback async      gt        let response   await fetch  api data       response   await response json       dataSet response              useEffect      gt        fetchMyAPI         fetchMyAPI      return        lt div gt         lt div gt data   JSON stringify data   lt  div gt         lt div gt           lt button onClick  fetchMyAPI  gt manual fetch lt  button gt         lt  div gt       lt  div gt          If you will use useCallback  look at example of how it works useCallback  Sandbox  import React    useState  useEffect  useCallback   from  quot react quot    export default function App       const  counter  setCounter    useState 1         if counter is changed  than fn will be updated with new counter value   const fn   useCallback      gt        setCounter counter   1         counter          if counter is changed  than fn will not be updated and counter will be always 1 inside fn     const fnBad   useCallback      gt          setCounter counter   1                       if fn or counter is changed  than useEffect will rerun   useEffect      gt        if    counter   2   return     this will stop the loop if counter is not even      fn          fn  counter          this will be infinite loop because fn is always changing with new counter value     useEffect      gt        fn          fn         return        lt div gt         lt div gt Counter is  counter  lt  div gt         lt button onClick  fn  gt add  1 count lt  button gt       lt  div gt

User · Answer

I read through this question  and feel the best way to implement useEffect is not mentioned in the answers  Let s say you have a network call  and would like to do something once you have the response  For the sake of simplicity  let s store the network response in a state variable  One might want to use action reducer to update the store with the network response   const  data  setData    useState null       This would be called on initial page load    useEffect     gt       fetch  https   www reddit com r   subreddit  json        then data   gt            setData data               catch err   gt               perform error handling if desired                       This would be called when store state data is updated    useEffect     gt       if  data            setPosts data children map it   gt                   do what you want                           data      Reference    https   reactjs org docs hooks-effect html tip-optimizing-performance-by-skipping-effects

User · Answer

Until React provides a better way  you can create a helper  useEffectAsync js  import   useEffect   from  react     export default function useEffectAsync effect  inputs        useEffect      gt            effect           inputs      Now you can pass an async function  useEffectAsync async      gt        const items   await fetchSomeItems        console log items            Update If you choose this approach  note that it s bad form   I resort to this when I know it s safe  but it s always bad form and haphazard  Suspense for Data Fetching  which is still experimental  will solve some of the cases  In other cases  you can model the async results as events so that you can add or remove a listener based on the component life cycle  Or you can model the async results as an Observable so that you can subscribe and unsubscribe based on the component life cycle

[javascript] React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks