What is useEffect in React - Hands-On Activity

Understanding useEffect in React

📖 Scenario: You are building a simple React app that shows a message and updates the document title when the message changes.

🎯 Goal: Learn how to use the useEffect hook to perform side effects like updating the document title when state changes.

📋 What You'll Learn

Create a React functional component called MessageUpdater

Use useState to hold a message string

Use useEffect to update the document title whenever the message changes

Render an input box to change the message

Render the current message below the input

💡 Why This Matters

🌍 Real World

useEffect is used in React apps to run code that affects things outside the component, like updating the page title, fetching data, or setting timers.

💼 Career

Understanding useEffect is essential for React developers to handle side effects properly and build interactive, dynamic web applications.

1

Set up the message state

Create a React functional component called MessageUpdater. Inside it, use useState to create a state variable called message with initial value "Hello".

React

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

function MessageUpdater() {
  // Create message state with useState and initial value "Hello"
  // Your code here
}

Hint

Use const [message, setMessage] = useState("Hello") inside the component.

2

Add useEffect to update document title

Inside the MessageUpdater component, add a useEffect hook that updates document.title to the current message whenever message changes.

React

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

function MessageUpdater() {
  const [message, setMessage] = useState("Hello");

  // Add useEffect to update document.title to message when message changes
  // Your code here
}

Hint

Use useEffect(() => { document.title = message; }, [message]) to update the title when message changes.

3

Render input to change message

Render an input element inside MessageUpdater that updates the message state when the user types. Use value={message} and onChange to update message with setMessage.

React

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

function MessageUpdater() {
  const [message, setMessage] = useState("Hello");

  useEffect(() => {
    document.title = message;
  }, [message]);

  // Render input with value=message and onChange to update message
  // Your code here
}

Hint

Use <input value={message} onChange={e => setMessage(e.target.value)} /> to let user change the message.

4

Display the current message below input

Below the input, render a <p> element that shows the current message inside the MessageUpdater component.

React

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

function MessageUpdater() {
  const [message, setMessage] = useState("Hello");

  useEffect(() => {
    document.title = message;
  }, [message]);

  return (
    
       setMessage(e.target.value)}
        aria-label="Message input"
      />
      {/* Render current message below input */}
      {/* Your code here */}
    
  );
}

Hint

Use <p>{message}</p> to show the message below the input.

Practice

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

easy

A. To declare state variables inside a component

B. To create new components dynamically

C. To run code after the component renders or when data changes

D. To style components with CSS

Solution

1. Step 1: Understand what useEffect does

   useEffect runs code after the component renders or when specified data changes.

2. Step 2: Compare with other React features

   State variables declare data, styling is CSS, and creating components is unrelated to useEffect.

3. Final Answer:

   To run code after the component renders or when data changes -> Option C

4. Quick Check:

   useEffect runs code after render or data change [OK]

Hint: useEffect runs after render or data updates [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect styles components
• Believing useEffect creates components

2. Which of the following is the correct syntax to use useEffect that runs only once after the first render?

easy

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

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

C. useEffect(() => { console.log('Hello'); }, true);

D. useEffect(() => { console.log('Hello'); }, null);

Solution

1. Step 1: Identify how to run useEffect once

   Passing an empty array [] as dependency makes useEffect run only once after the first render.

2. Step 2: Check other options

   Without dependencies (useEffect(() => { console.log('Hello'); });), it runs after every render. Options B and C pass non-array values, causing the effect to run after every render (with a React warning).

3. Final Answer:

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

4. Quick Check:

   Empty dependency array means run once [OK]

Hint: Empty array runs useEffect once after first render [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Passing non-array values thinking it runs once
• Confusing [] with null or true

3. What will be logged to the console when this component runs?

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

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

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

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}

medium

A. Logs 'Count is: 0' and then logs updated count each time button clicked

B. Logs 'Count is: 0' once after first render only

C. Logs nothing because useEffect has no dependencies

D. Causes an infinite loop of logs

Solution

1. Step 1: Understand useEffect with [count] dependency

   The effect runs after first render and every time count changes, logging the current count.

2. Step 2: Analyze button click behavior

   Clicking the button increases count, triggering useEffect to log the new value.

3. Final Answer:

   Logs 'Count is: 0' and then logs updated count each time button clicked -> Option A

4. Quick Check:

   useEffect runs on count change, logging each update [OK]

Hint: useEffect runs after render and on dependency change [OK]

Common Mistakes:

• Thinking useEffect runs only once without empty array
• Believing no logs happen without empty array
• Assuming infinite loops without setCount inside useEffect

4. Identify the problem in this code snippet using useEffect:

useEffect(() => {
  fetchData();
}, fetchData);

Assume fetchData is a function defined outside.

medium

A. No problem, this code is correct

B. fetchData cannot be called inside useEffect

C. useEffect must not have any dependencies

D. Dependency array should be an array, not a function

Solution

1. Step 1: Check dependency argument type

   The second argument to useEffect must be an array listing dependencies, not a function.

2. Step 2: Identify correct syntax

   It should be [fetchData] if fetchData is a dependency, not just fetchData alone.

3. Final Answer:

   Dependency array should be an array, not a function -> Option D

4. Quick Check:

   useEffect dependencies must be an array [OK]

Hint: Dependency argument must be an array, not a function [OK]

Common Mistakes:

• Passing a function instead of an array as dependencies
• Ignoring dependency array causing repeated runs
• Thinking useEffect cannot call functions

5. You want to fetch user data only once when a component mounts and clean up a subscription when it unmounts. Which useEffect pattern is correct?

useEffect(() => {
  const subscription = subscribeToUserData();
  fetchUserData();
  return () => {
    subscription.unsubscribe();
  };
}, []);

hard

A. This pattern correctly fetches once and cleans up on unmount

B. Missing dependency array causes multiple fetches

C. Cleanup function should not be returned inside useEffect

D. Subscription should be created inside cleanup function

Solution

1. Step 1: Check dependency array usage

   Empty array [] ensures effect runs once on mount and cleanup on unmount.

2. Step 2: Verify cleanup function correctness

   Returning a function that unsubscribes cleans up resources properly when component unmounts.

3. Final Answer:

   This pattern correctly fetches once and cleans up on unmount -> Option A

4. Quick Check:

   Empty array + cleanup function = run once + cleanup [OK]

Hint: Empty array runs once; return cleanup function for unmount [OK]

Common Mistakes:

• Omitting cleanup function causing memory leaks
• Not using empty array causing repeated fetches
• Placing subscription inside cleanup function incorrectly