Recently I started learning React, and when I arrived to this section of the documentation, I found the following example:
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>
);
}
We can see that document.title is being updated inside the React Effect Hook. I saw already that the documentation clearly states that:
Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.
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.
But, these are the doubts I have:
What exactly is happening behind the scenes when updating
document.titlefrom an Effect Hook and what would happen if doing it from outside?
From the React docs:
The function passed to
useEffectwill run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world.
So, the callback function would run after each render, and your statement which updates document.title would execute, updating the document title. It's as simple as that, and updating the document title using that statement would work the same way in other places outside an effect hook callback (e.g. in response to the click event of a button).
Is the
<title>tag contained in the React's virtual DOM?
No, the only elements which are part of the "virtual DOM", are those which are descendants of the root element that you render into using ReactDOM. See ReactDOM.createRoot for more details.
Do any of these things has to do with the reconciliation process of ReactDOM?
Yes, and it's not a simple process. You can read about reconciliation, read the Fiber architecture guide, and view the React DOM source for a very comprehensive understanding.