title: React - What exactly is happening when updating document.title inside an Effect Hook?
body: <p>Recently I started learning React, and when I arrived to this <a href="https://reactjs.org/docs/hooks-effect.html" rel="nofollow noreferrer">section</a> of the documentation, I found the following example:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  
  function Example() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(() =&gt; {
      // Update the document title using the browser API
      document.title = `You clicked ${count} times`;
    });
  
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>We can see that <strong>document.title</strong> is being updated inside the React Effect Hook. I saw already that the documentation clearly states that:</p>
  <blockquote>
  <p>Data fetching, setting up a subscription, and manually changing the
  DOM in React components are all examples of side effects.</p>
  </blockquote>
  <p>But, what's the reason in this case to treat DOM manipulation as a side effect? Of course first thing came to my mind is that it has to do with React rendering process as the framework manipulates the DOM for you and if you try to manipulate it directly, maybe it can cause unexpected behaviors.</p>
  <p>But, these are the doubts I have:</p>
  <ul>
  <li>What exactly is happening behind the scenes when updating <strong>document.title</strong> from an <strong>Effect Hook</strong> and what would happen if doing it from <strong>outside</strong>?</li>
  <li>Is the <strong>&lt;title&gt;</strong> tag contained in the <strong>React's virtual DOM</strong>?</li>
  <li>Do any of these things has to do with the <strong>reconciliation</strong> process of <strong>ReactDOM</strong>?</li>
  </ul>