What is useEffect in React - Why It Matters

The Big Idea

Discover how React's useEffect saves you from endless manual updates and bugs!

The Scenario

Imagine you want to update the page every time a user clicks a button or when data loads from the internet. You try to write code that watches for these changes and updates the page manually.

The Problem

Manually tracking changes and updating the page is tricky and easy to forget. You might miss updates or cause bugs by updating too often or too late. It becomes a mess as your app grows.

The Solution

useEffect lets React automatically run your code when something changes, like data loading or user actions. It keeps your app in sync without you having to watch everything yourself.

Before vs After

✗ Before

componentDidMount() { fetchData(); }
componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) fetchData(); }

✓ After

useEffect(() => { fetchData(); }, [id]);

What It Enables

It enables you to run code at the right time, keeping your app responsive and clean without extra hassle.

Real Life Example

Loading user info from a server whenever the user ID changes, so the page always shows the right data.

Key Takeaways

Manually syncing code with changes is hard and error-prone.

useEffect runs code automatically when dependencies change.

This keeps your app updated and easier to manage.