Component Lifecycle and React Hooks

🎯 Objective

By the end of this lesson, you will:

• Understand the lifecycle of React components.
• Use React Hooks like useState, useEffect, and useRef to manage state and side effects.
• Recognize how Hooks replace lifecycle methods in functional components.

🧠 What is a Component Lifecycle?

In React, components go through a series of phases:

1. Mounting — when a component is added to the DOM.
2. Updating — when props/state change.
3. Unmounting — when a component is removed from the DOM.

In class components, we used methods like:

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

But in modern React, we use Hooks in function components to handle the same things.

⚙️ Why React Hooks?

✅ Allow you to use state and lifecycle features in function components
✅ Encourage cleaner, more modular code
✅ Avoid “this” binding headaches
✅ Used in every modern React project

🧰 Essential React Hooks

1. useState — for Local State

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

✅ Keeps track of changing values
✅ useState(initialValue) returns a pair: [value, setValue]

2. useEffect — for Side Effects

import { useEffect } from 'react';

useEffect(() => {
  console.log('Component mounted');

  return () => {
    console.log('Component unmounted');
  };
}, []);

✅ Replaces lifecycle methods:

• componentDidMount → useEffect(..., [])
• componentDidUpdate → useEffect(..., [dependency])
• componentWillUnmount → return a cleanup function

3. useRef — for Persistent References

import { useRef } from 'react';

function Timer() {
  const timerId = useRef(null);

  const startTimer = () => {
    timerId.current = setInterval(() => {
      console.log('Tick...');
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerId.current);
  };

  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

✅ useRef() returns a mutable object
✅ Doesn’t cause re-renders
✅ Great for DOM access, timers, or previous values

🔁 Lifecycle Flow with Hooks

🔬 Example: Lifecycle in Action

import { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Cleanup
    return () => clearInterval(timer);
  }, []);

  return <h2>{time.toLocaleTimeString()}</h2>;
}

✅ Updates every second
✅ Uses useEffect for mounting and cleanup

🛠 Suggested Activities

🔧 Activity 1: Build a Click Tracker

Use useState to count how many times a button is clicked.

⏱ Activity 2: Use useEffect for a Timer

Create a component that shows how long the user has been on the page.

🔍 Activity 3: Cleanup on Unmount

Create a component that logs a message when it’s removed from the DOM (use useEffect cleanup).

📘 Best Practices

✅ Use multiple useEffect hooks for separation of concerns
✅ Avoid heavy logic inside useEffect
✅ Always clean up side effects
✅ Don’t overuse useRef — only when needed

❓ Reflection Questions

• Why do we need a cleanup function in useEffect?
• How is useState different from a regular variable?
• In what situations would you use useRef?

📚 Further Resources

• 🧠 React Docs: Hooks
• 🔍 useEffect Deep Dive – Kent C. Dodds
• 🎮 React Hooks Playground

✅ Action Step

Build a small React component that:

• Uses useState to manage a value
• Uses useEffect to log something on mount
• Cleans up when unmounted
• Bonus: Use useRef to track how many times it’s been rendered