Should I use useEffect() for dom manipulation or just do it directly?

Question

In the React docs I see this piece of code:

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

  //THE SUBJECT OF MY QUESTION:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

So, my question is why not change the document.title or any other DOM without using useEffect, like this:

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

  //THE SUBJECT OF MY QUESTION:
  document.title = `You clicked ${count} times`;

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

I know that when sending requests for example, it is asynchronous and we need to do it in useEffect. But DOM manipulation isn't asynchronous and it takes relatively 0 time, why do we then still have to use useEffect hook?

Answer 1

Its almost the same, see my related answer, useEffect in-depth.

The difference is a notable "gotcha", useEffect callback executed after the render phase.

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

Will result:

executed at render phase
executed after render phase

Answer 2

You better keep DOM manipulations and other side effects inside useEffect.

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

Reason is: This approach is compliant with React Strict Mode and upcoming Concurrent Mode.

What Concurrent mode is:

[...] React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption).

In your case, the document.title assignment might be repeated multiple times or React might even decide to abort the whole commit. In general, this can lead to inconsistencies:

Because the above methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. (docs)