4.4 React Lifecycle Methods – Understanding Component Lifecycles

Hey buddy! 👋
Ever wondered how a React component is born, lives, and dies? 🍼💻💀

In this article, we’re going to talk about the lifecycle of a React component — like how it starts, updates, and cleans up.

Let’s dive in and make it super easy and fun! 🏄

🎬 What Is a Component Lifecycle?

Think of a React component like a person’s life:

1. 👶 Mounting – it’s born (rendered on the screen).
2. 🧠 Updating – it changes and grows (when state or props change).
3. ⚰️ Unmounting – it’s removed from the screen (like retiring).

Each phase gives us a chance to run some code – like calling a friend when you’re born, changing clothes when you grow, or cleaning up your room when you leave.

🏛 Class Components & Lifecycle Methods

Before Hooks came into React, we used class components to handle lifecycles.

Let’s take a quick peek at a simple class component:

jsxCopyEditimport React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component has mounted! 🧱");
  }

  componentDidUpdate() {
    console.log("Component updated! 🔁");
  }

  componentWillUnmount() {
    console.log("Component will unmount! 🧹");
  }

  render() {
    return <h2>Hello from a Class Component!</h2>;
  }
}

🔍 What’s Happening Here?

This is how React lets us manage each stage of a component’s life!

📦 Side Effects? What’s That?

Side effects are things your component does outside of returning UI:

• Fetching data from an API 📡
• Subscribing to a service 🔔
• Changing the document title 📄
• Setting up a timer ⏲️

In class components, you’d use lifecycle methods for side effects.
But in modern React (with functional components), we use a hook…

🔧 Meet useEffect – The Lifecycle Hook

useEffect is like a superpower for functional components. 🦸‍♂️

It runs after the component has rendered — just like componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Here’s the basic syntax:

jsxCopyEdituseEffect(() => {
  // Your side effect code here
}, [dependencies]);

🧪 Example: Using useEffect to Fetch Data

Let’s fetch user data from an API when the component loads.

jsxCopyEditimport React, { useEffect, useState } from "react";

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then(res => res.json())
      .then(data => setUser(data));
  }, []); // empty array means run only once like componentDidMount

  return (
    <div>
      <h2>User Info:</h2>
      {user ? <p>{user.name}</p> : <p>Loading...</p>}
    </div>
  );
}

📌 Key Points

• [] makes it run only once, like componentDidMount.
• You can put values inside the array to watch for changes.

🧹 Cleaning Up – Like componentWillUnmount

Let’s say you set up a timer or a subscription — you should clean it up!

React lets you return a function inside useEffect that runs on unmount.

🧼 Cleanup Example: Timer

jsxCopyEdituseEffect(() => {
  const timer = setInterval(() => {
    console.log("⏰ Tick...");
  }, 1000);

  return () => {
    clearInterval(timer);
    console.log("🧹 Timer cleared!");
  };
}, []);

Now your app won’t have memory leaks!

📊 React Lifecycle Comparison Table

🧠 Infographic: Lifecycle Flow

Mount ➡️ Update ➡️ Unmount with Hooks and Class Methods shown side-by-side

🎁 Bonus: Common Side Effects to Use with useEffect

• 📡 Fetching data from an API
• 📜 Subscribing to a WebSocket
• 🧹 Cleaning up intervals or event listeners
• 📄 Updating page title or meta tags

🧠 Pro Tips

✅ Don’t forget the dependency array!
✅ Cleanup functions avoid memory leaks.
✅ useEffect can run multiple times, so keep logic tight.

📚 Summary – Lifecycle Made Simple

🙌 Keep Learning with Web Codder!

React’s lifecycle gives your app structure and power.
With useEffect, you’re now equipped to manage it like a boss. 💼

🚀 Want more React tricks and beginner-friendly lessons?

Subscribe and follow:

• 📺 YouTube: Web Codder
• 📸 Instagram: @web_codder_official
• 💬 WhatsApp Community: Join here

We’re building smart devs from scratch — and you’re one of them! 💡👊