This example is given in the react documentation to describe the use of useEffect.

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

Could this not be re-written without using useEffect as below? Why is useEffect preferred?

import React, { useState, useEffect } from 'react';

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

  const handleChange = () => {
      setCount(count   1);
      document.title = `You clicked ${count} times`;
  }

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

CodePudding user response：

There are two issues here:

• Calling a state setter won't reassign the stateful const variable in the current render - you need to wait until the next render for count to be updated, so

  const handleChange = () => {
      setCount(count   1);
      document.title = `You clicked ${count} times`;
  }
  

  won't work. Your second snippet will result in You clicked 0 times after a single click.

• Even if that were possible, when there are multiple places where a state setter may be called, putting something that should happen afterwards after every single one isn't very maintainable - it'd be better to be able to put that code to run afterwards in only one place.