Why does React official documentation compare useEffect with componentDidMount and componentDidUpdate?

Question

EDIT: the answers are helpful but not satisfying. What I want to know is if useEffect = componentDidmount + componentDidUpdate + componentWillUnmount , why would Dan Abramov say 'stop thinking in lifecycle'? For me it is perfect to think in component lifecycle when trying to understand useEffect .

In the official React useEffect documentation , useEffect is compared with componentDidMount and componentDidUpdate like this:

useEffect :

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidMount + componentDidUpdate :

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

However in Dan Abramov's A complete guide to useEffect , he said: stop looking at the useEffect Hook through the prism of the familiar class lifecycle methods .

I'm trying to make myself stop thinking in component lifecycle way when dealing with Hooks, but the example in the official doc seems to make sense, I cannot tell the difference between the useEffect example and the componentDidMount + componentDidUpdate example.

So are those 2 examples identical? Should I avoid thinking in component lifecycle when using Hooks?

Answer 1

The componentDidMount event only occurs when the React element has been rendered for the first time (perhaps to fetch data when the component mounts).

Whereas componentDidUpdate , on the other hand, occurs every time either props get updated, or when this.setState is invoked.

With the useEffect hook however, the functionality behind componentDidMount and componentDidUpdate have been consolidated into one single callback invocation.

Now, you may ask, why did React ever make any such distinction between the two lifecycle methods?

It's because some applications may behave a certain way when the element has been loaded for the first time.

So in other words, in useEffect , you lose the functionality associated with knowing when the element has been mounted for the first time. You can regain that functionality by either providing an empty array as the second parameter to useEffect , or using a ref (via the useRef hook) to hold variables to determine if the element has been mounted for the first time.

Answer 2

They are not exactly the same, but they serve similar purpose.

If you just started to learn React (or working on greenfield projects), you're probably going to write Function Component only, so you probably don't need to learn the life-cycle methods at first, but eventually you will encounter situation that require those knowledge of React life-cycle methods.

Learning the life-cycle methods are also good, since there's a lot of React tutorial & blog posts out there are written prior to the introduction of Hooks.

And if you're working with React Native, you'll need to learn those life-cycle methods. Not an option.