Understanding the useEffect Hook and Component Lifecycle in React

What is the useEffect Hook?

The useEffect hook lets you perform side effects in function components. Side effects include data fetching, subscriptions, or manually changing the DOM.

It runs after the component renders and can optionally clean up before the component unmounts or before the next effect runs.

• Replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
• Runs after every completed render by default.
• Can be customized with a dependency array to control when it runs.

Mapping useEffect to Component Lifecycle

In class components, lifecycle methods manage side effects at different phases. useEffect consolidates these into a single API.

You can simulate mounting, updating, and unmounting behaviors by how you use useEffect.

• Mounting: useEffect with an empty dependency array runs once after the first render.
• Updating: useEffect with dependencies runs after renders when those dependencies change.
• Unmounting: useEffect can return a cleanup function that runs before unmounting.

Practical Example of useEffect

Let's look at a simple example where useEffect fetches data when the component mounts and cleans up on unmount.