Common lifecycle use cases in React - Mini Project: Build & Apply

Common lifecycle use cases in React

📖 Scenario: You are building a simple React component that shows a counter. You want to learn how to set up initial data, configure a timer, update the counter every second, and clean up the timer when the component is removed.

🎯 Goal: Build a React functional component called Counter that starts counting from zero, increases the count every second, and stops the timer when the component is unmounted.

📋 What You'll Learn

Use React functional components with hooks

Use useState to hold the counter value

Use useEffect to set up and clean up the timer

Increment the counter every second

Clear the timer when the component unmounts

💡 Why This Matters

🌍 Real World

Timers and counters are common in apps like clocks, games, quizzes, and live data displays.

💼 Career

Understanding React lifecycle with hooks is essential for building interactive and efficient user interfaces.

1

Set up the initial counter state

Create a React functional component called Counter. Inside it, use useState to create a state variable called count with initial value 0.

React

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

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

  return (
    
      Count: {count}
    
  );
}

export default Counter;

Hint

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

2

Configure a timer interval

Inside the Counter component, use useEffect to set up a timer that runs every 1000 milliseconds (1 second). For now, just create the timer with setInterval and store its ID in a variable called timerId.

React

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

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

  // Use useEffect to set up a timer every 1000ms
  // Your code here

  return (
    
      Count: {count}
    
  );
}

export default Counter;

Hint

Use useEffect with an empty dependency array to run once. Inside it, create const timerId = setInterval(() => { }, 1000);.

3

Update the counter every second

Inside the setInterval callback, update the count state by increasing it by 1 using setCount. Use the function form of setCount to get the latest value.

React

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

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

  useEffect(() => {
    const timerId = setInterval(() => {
      // Increase count by 1 using setCount
      // Your code here
    }, 1000);
  }, []);

  return (
    
      Count: {count}
    
  );
}

export default Counter;

Hint

Use setCount(prevCount => prevCount + 1); inside the setInterval callback.

4

Clean up the timer on unmount

Inside the useEffect, return a cleanup function that calls clearInterval with the timerId to stop the timer when the component unmounts.

React

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

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

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // Return cleanup function to clear the timer
    // Your code here
  }, []);

  return (
    
      Count: {count}
    
  );
}

export default Counter;

Hint

Return a function inside useEffect that calls clearInterval(timerId);.

Practice

1. What is the primary purpose of the useEffect hook in React functional components?

easy

A. To define event handlers

B. To declare state variables

C. To run code after the component renders or updates

D. To style components dynamically

Solution

1. Step 1: Understand the role of useEffect

   The useEffect hook runs side effects like data fetching or timers after rendering.

2. Step 2: Compare with other options

   Declaring state is done with useState, event handlers are functions, and styling is separate.

3. Final Answer:

   To run code after the component renders or updates -> Option C

4. Quick Check:

   useEffect runs side effects after render [OK]

Hint: useEffect runs code after render or update [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect is for styling
• Believing useEffect defines event handlers

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

easy

A. useEffect(() => { console.log('Mounted'); });

B. useEffect(() => { console.log('Mounted'); }, []);

C. useEffect(() => { console.log('Mounted'); }, [() => {}]);

D. useEffect(() => { console.log('Mounted'); }, [{}]);

Solution

1. Step 1: Understand dependency array in useEffect

   An empty array [] means the effect runs once on mount only.

2. Step 2: Analyze other options

   Omitting dependencies runs effect after every render; arrays with unstable values like functions or objects run on every render since they are recreated.

3. Final Answer:

   useEffect(() => { console.log('Mounted'); }, []); -> Option B

4. Quick Check:

   Empty array runs effect once on mount [OK]

Hint: Empty dependency array means run once on mount [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Using non-empty arrays runs effect multiple times
• Putting recreated functions or objects in dependency array causes re-runs

3. Consider this React component:

function Timer() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <div>Count: {count}</div>;
}

What will be displayed after 3 seconds?

medium

A. Count: 0

B. Count: 1

C. Count: 1000

D. Count: 3

Solution

1. Step 1: Understand the interval effect

   The effect sets an interval that increments count every 1000ms (1 second).

2. Step 2: Calculate count after 3 seconds

   After 3 intervals, count increments from 0 to 3.

3. Final Answer:

   Count: 3 -> Option D

4. Quick Check:

   Interval increments count every second [OK]

Hint: Interval increments count every second [OK]

Common Mistakes:

• Ignoring cleanup function
• Thinking count stays 0
• Confusing milliseconds with count value

4. What is wrong with this React useEffect usage?

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello');
  }, 1000);
});

medium

A. Missing dependency array causes multiple timeouts to be set on every render

B. setTimeout is not allowed inside useEffect

C. console.log cannot be used inside useEffect

D. The timeout duration must be less than 500ms

Solution

1. Step 1: Check dependency array presence

   Without a dependency array, the effect runs after every render, creating a new timeout each time.

2. Step 2: Understand consequences

   This causes multiple timers to accumulate (no cleanup returned), leading to multiple console.logs firing.

3. Final Answer:

   Missing dependency array causes multiple timeouts to be set on every render -> Option A

4. Quick Check:

   Missing dependencies cause repeated effect runs [OK]

Hint: Always add dependency array to avoid repeated effects [OK]

Common Mistakes:

• Thinking setTimeout is disallowed in useEffect
• Believing console.log can't be used
• Assuming timeout duration limits

5. You want to fetch user data only when the userId prop changes in a React component. Which useEffect hook is correct?

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, ???);

  return <div>{user ? user.name : 'Loading...'}</div>;
}

hard

A. [userId]

B. [user]

C. []

D. [fetch]

Solution

1. Step 1: Identify when to run the effect

   The effect should run only when userId changes to fetch new data.

2. Step 2: Choose correct dependency array

   Including userId in the dependency array triggers effect on its change.

3. Final Answer:

   [userId] -> Option A

4. Quick Check:

   Dependency array controls when effect runs [OK]

Hint: Put changing props in dependency array [OK]

Common Mistakes:

• Using empty array runs effect only once
• Using state variable instead of prop
• Including functions like fetch in dependencies