Lifecycle mapping with hooks in React - Mini Project: Build & Apply

Lifecycle mapping with hooks

📖 Scenario: You are building a simple React component that tracks and displays the number of times a button is clicked. You want to learn how to use React hooks to map lifecycle events like mounting, updating, and unmounting.

🎯 Goal: Create a React functional component called ClickTracker that uses useState to count clicks and useEffect to log messages when the component mounts, updates, and unmounts.

📋 What You'll Learn

Create a state variable count initialized to 0

Create a useEffect hook that logs 'Component mounted' once when the component first renders

Create a useEffect hook that logs 'Count updated' every time count changes

Create a useEffect hook that logs 'Component unmounted' when the component is removed

Render a button that increments count when clicked

Display the current count value in a <p> element

💡 Why This Matters

🌍 Real World

React components often need to run code when they appear, update, or disappear. This project shows how to map those lifecycle events using hooks.

💼 Career

Understanding React lifecycle with hooks is essential for building modern web apps and is a common skill required in frontend developer roles.

1

Set up state for click count

Create a React functional component called ClickTracker. Inside it, use the useState hook to create a state variable named count initialized to 0.

React

import React, { useState, useEffect } from 'react';

function ClickTracker() {
  // Create state variable count with initial value 0
  // Your code here

  return (
    
    
  );
}

export default ClickTracker;

Hint

Use const [count, setCount] = useState(0); inside your component function.

2

Add mount lifecycle logging with useEffect

Inside the ClickTracker component, add a useEffect hook that logs the message 'Component mounted' to the console only once when the component first renders.

React

import React, { useState, useEffect } from 'react';

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

  // Add useEffect to log 'Component mounted' once
  // Your code here

  return (
    
    
  );
}

export default ClickTracker;

Hint

Use useEffect with an empty dependency array [] to run code only once on mount.

3

Add update lifecycle logging for count changes

Add another useEffect hook inside ClickTracker that logs 'Count updated' to the console every time the count state changes.

React

import React, { useState, useEffect } from 'react';

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

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

  // Add useEffect to log 'Count updated' when count changes
  // Your code here

  return (
    
    
  );
}

export default ClickTracker;

Hint

Use useEffect with [count] as dependency to run code when count changes.

4

Add unmount logging and button to update count

Complete the ClickTracker component by adding a useEffect hook that logs 'Component unmounted' when the component is removed. Also, render a button that increments count when clicked and a paragraph that displays the current count.

React

import React, { useState, useEffect } from 'react';

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

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

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

  // Add useEffect for unmount logging
  // Add button to increment count
  // Add paragraph to display count
  // Your code here

  return (
    
    
  );
}

export default ClickTracker;

Hint

Use a cleanup function inside useEffect to log on unmount. Render a button with onClick that calls setCount(count + 1). Display count inside a paragraph.

Practice

1. Which React hook is used to run code after a component renders, replacing lifecycle methods like componentDidMount and componentDidUpdate?

easy

A. useEffect

B. useState

C. useContext

D. useRef

Solution

1. Step 1: Understand lifecycle replacement

   The useEffect hook runs code after rendering, replacing lifecycle methods like componentDidMount and componentDidUpdate.

2. Step 2: Identify the correct hook

   useState manages state, useContext accesses context, and useRef stores mutable values. Only useEffect runs side effects after render.

3. Final Answer:

   useEffect -> Option A

4. Quick Check:

   Effect hook = useEffect [OK]

Hint: useEffect runs code after render like lifecycle methods [OK]

Common Mistakes:

• Confusing useState with useEffect
• Thinking useRef runs effects
• Believing useContext triggers after render

2. Which of the following is the correct syntax to run an effect only once when a React component mounts using useEffect?

easy

A. useEffect(() => { /* code */ }, null);

B. useEffect(() => { /* code */ });

C. useEffect(() => { /* code */ }, true);

D. useEffect(() => { /* code */ }, []);

Solution

1. Step 1: Understand dependency array usage

   Passing an empty array [] as the second argument to useEffect makes it run only once after the first render (component mount).

2. Step 2: Analyze each option

   useEffect(() => { /* code */ }); runs after every render. useEffect(() => { /* code */ }, true); runs after every render since non-array dependencies are ignored. useEffect(() => { /* code */ }, null); with null also runs after every render as it's not an array.

3. Final Answer:

   useEffect(() => { /* code */ }, []); -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty dependency array runs effect once on mount [OK]

Common Mistakes:

• Omitting dependency array causes effect every render
• Using null instead of empty array
• Passing non-array values like true or null as dependencies

3. What will be logged to the console when the following React component mounts and then the count state changes?

function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count is', count);
  }, [count]);
  return  setCount(count + 1)}>Increment;
}

medium

A. Logs 'Count is 0' once on mount only

B. Logs 'Count is 0' repeatedly every second

C. Logs 'Count is 0' on mount and 'Count is 1' after first click

D. Logs nothing because useEffect has dependencies

Solution

1. Step 1: Understand useEffect with dependency

   The effect runs after the component mounts and whenever count changes because count is in the dependency array.

2. Step 2: Trace the console logs

   On mount, count is 0, so it logs 'Count is 0'. After clicking the button, count becomes 1, triggering the effect again and logging 'Count is 1'.

3. Final Answer:

   Logs 'Count is 0' on mount and 'Count is 1' after first click -> Option C

4. Quick Check:

   Effect runs on mount and dependency change [OK]

Hint: Effect runs on mount and when dependencies change [OK]

Common Mistakes:

• Thinking effect runs only once without dependencies
• Assuming no logs because dependencies exist
• Confusing useEffect with setInterval

4. Identify the problem in this React component that uses useEffect and suggest the fix:

function Timer() {
  React.useEffect(() => {
    const id = setInterval(() => console.log('Tick'), 1000);
  }, []);
  return <div>Timer</div>;
}

medium

A. No problem; code works fine as is

B. Missing cleanup function to clear the interval on unmount

C. Dependency array should include 'id' to update interval

D. setInterval should be replaced with setTimeout

Solution

1. Step 1: Analyze effect side effects

   The effect sets an interval but does not clear it, causing a memory leak when the component unmounts.

2. Step 2: Suggest cleanup function

   Return a cleanup function from useEffect that calls clearInterval(id) to stop the interval on unmount.

3. Final Answer:

   Missing cleanup function to clear the interval on unmount -> Option B

4. Quick Check:

   Cleanup prevents memory leaks [OK]

Hint: Always clean intervals/timeouts in useEffect cleanup [OK]

Common Mistakes:

• Forgetting to clear intervals causing leaks
• Adding dependencies unnecessarily
• Replacing setInterval with setTimeout incorrectly

5. You want to fetch user data only once when a component mounts and cancel the fetch if the component unmounts before it finishes. Which is the best way to implement this using useEffect?

hard

A. useEffect(() => {
const controller = new AbortController();
fetch('/user', { signal: controller.signal })
.then(res => res.json())
.then(data => console.log(data));
return () => controller.abort();
}, []);

B. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, []);

C. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
return () => console.log('Cleanup');
}, []);

D. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, [fetch]);

Solution

1. Step 1: Understand fetch cancellation

   To cancel a fetch request on unmount, use an AbortController and pass its signal to fetch.

2. Step 2: Implement cleanup to abort fetch

   Return a cleanup function from useEffect that calls controller.abort() to cancel the fetch if unmount happens early.

3. Final Answer:

   Use AbortController with cleanup to abort fetch -> Option A

4. Quick Check:

   AbortController + cleanup = safe fetch [OK]

Hint: Use AbortController and cleanup to cancel fetch on unmount [OK]

Common Mistakes:

• Not cancelling fetch causing memory leaks
• Logging cleanup without aborting fetch
• Adding fetch to dependencies unnecessarily