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

reactjs react-hooks
uturnr picture uturnr · Nov 6, 2018 · Viewed 54.3k times · Source

With React's new Effect Hooks, I can tell React to skip applying an effect if certain values haven't changed between re-renders - Example from React's docs:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

But the example above applies the effect upon initial render, and upon subsequent re-renders where count has changed. How can I tell React to skip the effect on the initial render?

Answer

Estus Flask picture Estus Flask · Nov 6, 2018

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)
      fn();
    else
      didMountRef.current = true;
  }, inputs);
}

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

Related questions

How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
What is useState() in React?

I am currently learning hooks concept in React and trying to understand below example. import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>…

Read More
How to use componentWillMount() in React Hooks?

In the official docs of React it mentions - If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. My question is - how can we use the componentWillMount() …

Read More