In general is it better to use one or many useEffect hooks in a single component? [closed]

by

The pattern that you need to follow depends on your use case.

First: You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re-added on a prop change.

In such a case, using two different useEffect is better to keep the relevant logic together as well as having performance benefits

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

Second: You need to trigger an API call or some other side-effect when any of the state or props change from a defined set. In such a case a single useEffect with the relevant dependencies to monitor would be better

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

Third: You need separate side-effect for different sets of changes. In such a case, separate out relevant side-effects into different useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

More Related Contents:

  1. In useEffect, what’s the difference between providing no dependency array and an empty one?
  2. Stop useEffect from running on mount
  3. How to fix missing dependency warning when using useEffect React Hook
  4. How to use `setState` callback on react hooks
  5. Does React batch state update functions when using hooks?
  6. How to use callback with useState hook in react [duplicate]
  7. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  8. With useEffect, how can I skip applying an effect upon the initial render?
  9. How to use throttle or debounce with React Hook?
  10. React useReducer async data fetch
  11. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  12. Set types on useState React Hook with TypeScript
  13. How to sync props to state using React hooks : setState()
  14. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. React: useState or useRef?
  18. Lazy initial state – What it is and how to use it?
  19. Does a render happen before function in React Hooks useEffect is called?
  20. React Hooks – Modified state not reflecting immediately
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks: Why is .current null for useRef Hook?
  23. React hook rendering an extra time
  24. How to test a react component that is dependent on useContext hook?
  25. What is the expected return of `useEffect` used for?
  26. ReactJS – prevState in the new useState React hook?
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. How to create dynamic refs in functional component- Using useRef Hook
  29. Put A Warning If Page Refresh in ReactJS
  30. React – Is useState ‘s setter function able to change?

Leave a Comment