What is the difference between useEffect and componentDidMount?

React Beginner Questions - Set 5

The same moment in the lifecycle, different mechanics: `componentDidMount` runs once per mount, `useEffect` runs according to its dependencies.

Example

// Class
class Profile extends Component {
  componentDidMount() { this.load(this.props.id); }
  componentDidUpdate(prev) {
    if (prev.id !== this.props.id) this.load(this.props.id);
  }
  componentWillUnmount() { this.abort?.(); }
  render() { return null; }
}

// Function
function Profile({ id }) {
  useEffect(() => {
    const controller = new AbortController();
    load(id, controller.signal);
    return () => controller.abort();
  }, [id]);           // mount + every id change; cleanup before each re-run
  return null;
}

What to notice

`useEffect` with `[]` is `componentDidMount`; its cleanup is `componentWillUnmount`.
The dependency array replaces `componentDidUpdate`'s manual `prevProps` comparisons.
Unlike `componentDidMount`, an effect also runs after every dependency change — that is usually the point.

← Back to the question list