If an action is performed on a webpage, an Effect Hook may be used to transfer a side effect to another part of the DOM.
The example below updates the document title of the webpage when a button is clicked:
function Effect() {
const [car, setcar] = useState('Ferrari');
useEffect(() => {
document.title = `My favorite car is ${car}`;
});
return (
<div>
<p>My favorite car is {car}</p>
<button onClick={() => setcar('McLaren')}>
Not this one?
</button>
</div>
);
}