REACT111 - useEffect & Lifecycle Basics

Many React components need to perform side effects such as fetching data, subscribing to events, or updating the document title.
In this lesson, you will learn how to manage side effects using the useEffect hook and understand basic lifecycle behavior in React functional components.

What Is a Side Effect?

A side effect is any operation that affects something outside the component render process.

Common side effects include:

Fetching data from an API
Setting up timers or intervals
Subscribing to events
Updating the document title
Manipulating browser APIs

Side effects should not run during rendering.

Introducing useEffect

useEffect is a React Hook used to run side effects in functional components.

Basic syntax:

import { useEffect } from "react";
 
useEffect(() => {
  // side effect code
});

By default, useEffect runs after every render.

Running useEffect Once (on Mount)

To run an effect only once when the component mounts, use an empty dependency array.

useEffect(() => {
  console.log("Component mounted");
}, []);

This is equivalent to the componentDidMount lifecycle behavior.

Dependency Array Explained

The dependency array controls when the effect runs.

useEffect(() => {
  console.log("Count changed");
}, [count]);

Rules:

No dependency array => runs after every render
Empty array => runs once
With dependencies => runs when dependencies change

Fetching Data with useEffect

A common use case is fetching data from an API.

function Users() {
  const [users, setUsers] = useState([]);
 
  useEffect(() => {
    fetch("https://example.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);
 
  return <ul></ul>;
}

Always fetch data inside useEffect.

Cleanup Functions

Effects can return a cleanup function.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running");
  }, 1000);
 
  return () => {
    clearInterval(timer);
  };
}, []);

Cleanup runs:

Before the component unmounts
Before the effect re-runs

This prevents memory leaks.

Basic Lifecycle Mapping

In functional components, lifecycle behavior maps like this:

Mount => useEffect with empty dependency
Update => useEffect with dependencies
Unmount => cleanup function

React Hooks replace traditional class lifecycle methods.

Common useEffect Mistakes

Avoid these mistakes:

Forgetting dependency array
Putting state updates incorrectly
Creating infinite loops
Fetching data outside useEffect

Always think about when the effect should run.

Summary

In this lesson, you learned:

What side effects are
How useEffect works
Dependency array behavior
Fetching data with useEffect
Cleanup functions
Basic lifecycle concepts in React

In the next lesson, we will build a small React project to combine everything you have learned so far.