React 19 useEffect Explained | Fetch Data & Handle Side Effects Day 7

React 19 useEffect Explained | Fetch Data & Handle Side Effects Day 7

In Day 7 of the React 19 series, you will finally master one of the most powerful and confusing hooks in React — useEffect.

Modern React apps are not just about rendering UI. They fetch data from APIs, start timers, listen to browser events, and talk to external systems. All of this is called side effects, and React needs a safe way to control when they run. That is exactly what useEffect is for.

In this lesson, you will understand what side effects really are and why putting them directly inside a component causes bugs, infinite loops, and performance issues. You will learn how useEffect lets React run your code only when it is supposed to run.

You will learn how to:
Understand what side effects are
Use the useEffect hook correctly
Control when effects run using dependency arrays
Fetch data from APIs
Handle loading and error states
Prevent infinite loops
Clean up timers and listeners

We will build a real dashboard style example that fetches data from an API and displays it on the screen. You will also learn how professional apps show loading indicators and error messages while data is being fetched.

The dependency array will finally make sense. You will see exactly how React decides when to re run your effect and how one wrong dependency can crash your app with an infinite loop.

You will also learn how to clean up effects using return functions so your app does not leak memory or run unnecessary background tasks.

This lesson is fully aligned with React 19. Even though server components and actions reduce the need for some effects, useEffect is still essential for browser work like timers, subscriptions, and client side data.

Homework:
Fetch a list of users from an API and display their name and email with a loading screen.

Next in the series: useRef and DOM manipulation — how React talks to real HTML.