[Intro]

[Background Music: Friendly and engaging tone]

Instructor:

"Hey there, and welcome back! In the last lesson, we explored lifecycle methods in class components, such as componentDidMount, componentDidUpdate, and componentWillUnmount.

But in modern React, we use functional components with hooks instead of class components. The useEffect hook allows us to achieve the same functionality without using lifecycle methods!

By the end of this lesson, you’ll understand:

• How useEffect replaces lifecycle methods in functional components.
• The basic syntax of useEffect.
• How to run effects on mount, update, and cleanup.

Let’s dive in!"

1. What is useEffect?

Instructor:

"useEffect is a React Hook that allows functional components to perform side effects.

Side effects include:

✅ Fetching data from an API.

✅ Updating the DOM manually.

✅ Setting up and cleaning up event listeners or timers.

Before hooks, we needed class components to handle lifecycle events. Now, we can do everything using useEffect in a simpler, more readable way!"