React Hooks: useEffect() is called twice even if an empty array is used as an argument

by

Put the console.log inside the useEffect

Probably you have other side effects that cause the component to rerender but the useEffect itself will only be called once. You can see this for sure with the following code.

useEffect(()=>{
      /*
      Query logic
      */
      console.log('i fire once');
},[]);

If the log “i fire once” is triggered more than once it means your issue is
one of 3 things.

This component appears more than once in your page

This one should be obvious, your component is in the page a couple of times and each one will mount and run the useEffect

Something higher up the tree is unmounting and remounting

The component is being forced to unmount and remount on its initial render. This could be something like a “key” change happening higher up the tree. you need to go up each level with this useEffect until it renders only once. then you should be able to find the cause or the remount.

React.Strict mode is on

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

This answer was pointed out by @johnhendirx and written by @rangfu, see link and give him some love if this was your problem. If you’re having issues because of this it usually means you’re not using useEffect for its intended purpose. There’s some great information about this in the beta docs you can read that here

More Related Contents:

  1. Infinite loop in useEffect
  2. How to use `setState` callback on react hooks
  3. React-hooks. Can’t perform a React state update on an unmounted component
  4. React useState cause double rendering
  5. React Hook : Send data from child to parent component
  6. React useReducer async data fetch
  7. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  8. In general is it better to use one or many useEffect hooks in a single component? [closed]
  9. React hooks useEffect only on update?
  10. Stop useEffect from running on mount
  11. useNavigate() may be used only in the context of a component
  12. Testing React components that fetches data using Hooks
  13. Why React useState with functional update form is needed?
  14. React.useState does not reload state from props
  15. React: useState or useRef?
  16. How do react hooks determine the component that they are for?
  17. React Hooks: how to wait for the data to be fetched before rendering
  18. useReducer Action dispatched twice
  19. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  20. is it possible to React.useState(() => {}) in React?
  21. React Hooks – How do I implement shouldComponentUpdate?
  22. React hook rendering an extra time
  23. Field Array in React using formik
  24. What is the expected return of `useEffect` used for?
  25. ReactJS – prevState in the new useState React hook?
  26. React – Is useState ‘s setter function able to change?
  27. Passing array to useEffect dependency list
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment