componentDidMount vs useEffect: Mapping Class Lifecycle to Hooks

componentDidMount vs useEffect: Mapping Class Lifecycle to Hooks

componentDidMount and useEffect both run after mount, but they are not identical. Understanding the mapping and the differences helps you convert code correctly.

What componentDidMount Does

It runs once, after the component is added to the DOM. You fetch data, set up subscriptions, and start timers here. It runs only on mount, never on update.

What useEffect Does

useEffect with an empty dependency array also runs once after mount, matching componentDidMount. But useEffect is more flexible: with dependencies, it also runs on updates, which componentDidMount does not.

The Cleanup Difference

componentDidMount has no cleanup of its own; you clean up in componentWillUnmount, a separate method. useEffect combines setup and cleanup in one function: you return a cleanup function from the same effect.

The Timing Difference

componentDidMount runs synchronously after the DOM update in older React. useEffect runs asynchronously after the browser paints, so the user sees the UI before the effect runs. This is a real behavioral difference.

The Mental Model

componentDidMount is one moment in a class lifecycle. useEffect is a general-purpose effect hook that can match mount, update, and unmount all in one, depending on the dependency array and cleanup.

The Takeaway

useEffect with an empty array matches componentDidMount for the mount case, but it is more flexible and combines setup with cleanup. The main real difference is timing: useEffect runs after paint, while componentDidMount runs after the DOM update.