Updating document title without hooks

Question

Is it required to use a hook for updating document.title? Is there any advantage to using useEffect vs. just setting the title directly as below?

(This snippet also echoes the title to the console, since you can't see the document title in Stack Snippets, but in my real code I'm just updating the title.)

const { useState } = React;

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

  document.title = `You clicked ${count} times`;
  console.log(document.title);

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

ReactDOM.render(<Example />, document.getElementById('app'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

(Note: This is the useEffect example without the useEffect call.)

Answer 1

It may cause inconsistency in the future.

After concurrent mode, render may be abandoned when high priority task comes before react lifecycle.

Then at that moment document.title is not equal to the value in dom.

In your case, maybe title is You clicked 2 times but dom You clicked 1 times.

It is not what react is doing now(react@16). But it will happen.