With useEffect, how can I skip applying an effect upon the initial render?

by

As the guide states,

The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

In this example from the guide it’s expected that count is 0 only on initial render:

const [count, setCount] = useState(0);

So it will work as componentDidUpdate with additional check:

useEffect(() => {
  if (count)
    document.title = `You clicked ${count} times`;
}, [count]);

This is basically how custom hook that can be used instead of useEffect may work:

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);

  useEffect(() => {
    if (didMountRef.current) { 
      return fn();
    }
    didMountRef.current = true;
  }, inputs);
}

Credits go to @Tholle for suggesting useRef instead of setState.

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. Does React batch state update functions when using hooks?
  5. How to use callback with useState hook in react [duplicate]
  6. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  7. In useEffect, what’s the difference between providing no dependency array and an empty one?
  8. How to use throttle or debounce with React Hook?
  9. React Hook : Send data from child to parent component
  10. In general is it better to use one or many useEffect hooks in a single component? [closed]
  11. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  12. Set types on useState React Hook with TypeScript
  13. Stop useEffect from running on mount
  14. How to sync props to state using React hooks : setState()
  15. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  16. React.useState does not reload state from props
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. React: useState or useRef?
  19. Lazy initial state – What it is and how to use it?
  20. React Hooks: how to wait for the data to be fetched before rendering
  21. Does a render happen before function in React Hooks useEffect is called?
  22. React Hooks – Modified state not reflecting immediately
  23. React Hooks – Modified state not reflecting immediately
  24. React Hooks: Why is .current null for useRef Hook?
  25. React hook rendering an extra time
  26. Field Array in React using formik
  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