How to call loading function with React useEffect only once

Question

The useEffect React hook will run the passed in function on every change  This can be optimized to let it call only when the desired properties change   What if I want to call an initialization function from componentDidMount and not call it again on changes  Let s say I want to load an entity  but the loading function doesn t need any data from the component  How can we make this using the useEffect hook   class MyComponent extends React PureComponent       componentDidMount             loadDataOnlyOnce              render               With hooks this could look like this   function MyComponent         useEffect      gt            loadDataOnlyOnce       this will fire on every change                          return

User · Answer

function useOnceCall cb  condition   true      const isCalledRef   React useRef false      React useEffect      gt        if  condition  amp  amp   isCalledRef current          isCalledRef current   true        cb                cb  condition       and use it  useOnceCall     gt     console log  called        or useOnceCall     gt     console log  isLoading      isLoading

User · Answer

leave the dependency array blank   hope this will help you understand better     useEffect      gt          doSomething                empty dependency array runs Only Once  on Mount useEffect      gt      doSomething value      value      pass value as a dependency  if dependencies has changed since the last time  the effect will run again  useEffect      gt      doSomething value        no dependency  This gets called after every render

User · Answer

we developed a module on GitHub that has hooks for fetching data so you can use it like this for your purpose  import   useFetching   from  quot react-concurrent quot    const app        gt      const   data  isLoading  error   refetch     useFetching      gt      fetch  quot http   example com quot             You can fork that out  but any PRs are welcome  https   github com hosseinmd react-concurrent react-concurrent

User · Answer

If you only want to run the function given to useEffect after the initial render  you can give it an empty array as second argument  function MyComponent       useEffect      gt        loadDataOnlyOnce                 return  lt div gt               lt  div gt

User · Answer

Pass an empty array as the second argument to useEffect  This effectively tells React  quoting the docs      This tells React that your effect doesn   t depend on any values from props or state  so it never needs to re-run    Here s a snippet which you can run to show that it works    x000D   x000D  function App     x000D    const  user  setUser    React useState null   x000D   x000D    React useEffect      gt    x000D      fetch  https   randomuser me api    x000D         then results   gt  results json    x000D         then data   gt    x000D          setUser data results 0    x000D            x000D               Pass empty array to only run once on mount  x000D     x000D    return  lt div gt  x000D       user   user name first    Loading      x000D     lt  div gt   x000D    x000D   x000D  ReactDOM render  lt App  gt   document getElementById  app     x000D   lt script src  https   unpkg com react 16 7 0-alpha 0 umd react development js  gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 7 0-alpha 0 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I like to define a mount function  it tricks EsLint in the same way useMount does and I find it more self-explanatory   const mount        gt      console log  mounted               const unmount        gt        console log  unmounted                    return unmount   useEffect mount

User · Answer

useMountEffect hook  Running a function only once after component mounts is such a common pattern that it justifies a hook of it s own that hides implementation details    const useMountEffect    fun    gt  useEffect fun        Use it in any functional component    function MyComponent         useMountEffect function     function will run only once after it has mounted       return  lt div gt     lt  div gt         About the useMountEffect hook   When using useEffect with a second array argument  React will run the callback after mounting  initial render  and after values in the array have changed  Since we pass an empty array  it will run only after mounting

User · Answer

TL DR  useEffect yourCallback      - will trigger the callback only after the first render   Detailed explanation  useEffect runs by default after every render of the component  thus causing an effect    When placing useEffect in your component you tell React you want to run the callback as an effect  React will run the effect after rendering and after performing the DOM updates   If you pass only a callback - the callback will run after each render   If passing a second argument  array   React will run the callback after the first render and every time one of the elements in the array is changed  for example when placing useEffect      gt  console log  hello     someVar  someOtherVar   - the callback will run after the first render and after any render that one of someVar or someOtherVar are changed   By passing the second argument an empty array  React will compare after each render the array and will see nothing was changed  thus calling the callback only after the first render

[javascript] How to call loading function with React useEffect only once

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks