We’ve already seen this example at the top of this page, but let’s take a closer look at it:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
This is why in React classes, we put side effects into componentDidMount and componentDidUpdate. Coming back to our example, here is a React counter class component that updates the document title right after React makes changes to the DOM:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {    document.title = `You clicked ${this.state.count} times`;  }  componentDidUpdate() {    document.title = `You clicked ${this.state.count} times`;  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
Now that we know more about effects, these lines should make sense:

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

Recommend

React Using the Effect Hook Effects Without Cleanup Example Using Classes

React Using the Effect Hook

React Hooks API Reference Additional Hooks useDebugValue Defer formatting debug values

React Hooks API Reference Additional Hooks useDebugValue

React Hooks API Reference Additional Hooks useImperativeHandle

React Hooks API Reference Additional Hooks useRef

React Hooks API Reference Additional Hooks useMemo

React Hooks API Reference Additional Hooks useReducer Lazy initialization

React Hooks API Reference Additional Hooks useReducer Specifying the initial state

React Hooks API Reference Additional Hooks useReducer

React Hooks API Reference Basic Hooks useContext

React Hooks API Reference Basic Hooks useEffect Conditionally firing an effect

React Hooks API Reference Basic Hooks useEffect Cleaning up an effect

React Hooks API Reference Basic Hooks useEffect

React Hooks API Reference Basic Hooks useState Lazy initial state

React Hooks API Reference Basic Hooks useState Functional updates

React Hooks API Reference Basic Hooks useState

React Hooks at a Glance 🔌 Other Hooks

React Hooks at a Glance 💡 Building Your Own Hooks

React Hooks at a Glance ⚡️ Effect Hook

React Hooks at a Glance 📌 State Hook Declaring multiple state variables

React Hooks at a Glance 📌 State Hook

React SyntheticEvent Reference Pointer Events

React SyntheticEvent Reference Focus Events Detecting Focus Entering and Leaving

React SyntheticEvent Reference Focus Events onBlur

React SyntheticEvent Reference Focus Events onFocus

React SyntheticEvent Reference Clipboard Events

React SyntheticEvent Overview

React Accessibility Development and Testing Tools Development assistance eslint-plugin-jsx-a11y

React Accessibility Mouse and pointer events

React Accessibility Focus Control Programmatically managing focus

React Accessibility Accessible Forms Labeling

React Accessibility Semantic HTML

React Accessibility Standards and Guidelines WAI-ARIA

Add React to a Website Optional: Try React with JSX Run JSX Preprocessor

Add React to a Website Optional: Try React with JSX Quickly Try JSX

Add React to a Website Optional: Try React with JSX

Add React to a Website Add React in One Minute Tip: Minify JavaScript for Production

Add React to a Website Add React in One Minute Step 3: Create a React Component

Add React to a Website Add React in One Minute Step 2: Add the Script Tags

Add React to a Website Add React in One Minute Step 1: Add a DOM Container to the HTML

Create a New React App Recommended Toolchains Create React App

React Implementation Notes Top-Level Updates

React Implementation Notes Updating Host Components

React Implementation Notes Updating Composite Components

React Implementation Notes Updating

React Implementation Notes Unmounting

React Implementation Notes Introducing Internal Instances

React Implementation Notes Mounting Host Elements

React Implementation Notes Mounting as a Recursive Process

React Optimizing Performance The Power Of Not Mutating Data

React Optimizing Performance Examples

React Optimizing Performance Avoid Reconciliation

React Optimizing Performance Use the Production Build webpack

React Optimizing Performance Use the Production Build Rollup

React Optimizing Performance Use the Production Build Browserify