The useEffect Hook

The useEffect Hook lets you perform side effects from functional components. Side effects are operations that can affect other components and cannot be done during the rendering. An example for such an operation is data fetching.

Code example: Counter component using the useEffect Hook to update the document title

Copy
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>
  );
}

The useEffect Hook tells React that something has to be done AFTER the render method is called.