Multiple effects in a component in React - Mini Project: Build & Apply

Multiple effects in a component

📖 Scenario: You are building a simple React component that shows a user's name and the current window width. You want to update the document title with the user's name and also update the width value whenever the window is resized.

🎯 Goal: Create a React functional component that uses two separate useEffect hooks: one to update the document title with the user's name, and another to listen for window resize events and update the width state.

📋 What You'll Learn

Create a state variable name with initial value 'Alice'.

Create a state variable width with initial value equal to window.innerWidth.

Use one useEffect to update document.title to `User: ${name}` whenever name changes.

Use another useEffect to add a resize event listener on window that updates width state, and clean up the listener on unmount.

Render the name and width values inside <div> elements.

💡 Why This Matters

🌍 Real World

Many React apps need to handle multiple side effects like updating the page title and responding to window size changes separately.

💼 Career

Understanding multiple useEffect hooks is essential for React developers to manage side effects cleanly and avoid bugs.

1

Set up state variables

Create a React functional component called UserInfo. Inside it, create a state variable name with initial value 'Alice' using useState. Also create a state variable width with initial value window.innerWidth using useState.

React

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

function UserInfo() {
  // Create state variables name and width here
  // Your code here
}

Need a hint?

Use const [name, setName] = useState('Alice') and const [width, setWidth] = useState(window.innerWidth) inside the component.

2

Add effect to update document title

Add a useEffect hook inside UserInfo that updates document.title to `User: ${name}` whenever the name state changes.

React

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

function UserInfo() {
  const [name, setName] = useState('Alice');
  const [width, setWidth] = useState(window.innerWidth);

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

Need a hint?

Use useEffect with a dependency array containing name. Inside, set document.title = `User: ${name}`.

3

Add effect to handle window resize

Add another useEffect hook inside UserInfo that adds a resize event listener on window. The listener should update the width state with window.innerWidth. Also clean up the event listener when the component unmounts.

React

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

function UserInfo() {
  const [name, setName] = useState('Alice');
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    document.title = `User: ${name}`;
  }, [name]);

  // Add useEffect to handle window resize and update width
  // Your code here
}

Need a hint?

Inside useEffect, define handleResize function that calls setWidth(window.innerWidth). Add it as a listener to resize event on window. Return a cleanup function that removes the listener.

4

Render the component output

Inside the UserInfo component, return a <div> that contains two <p> elements. The first shows the text Name: {name} and the second shows Window width: {width}.

React

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

function UserInfo() {
  const [name, setName] = useState('Alice');
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    document.title = `User: ${name}`;
  }, [name]);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // Return JSX with name and width displayed
  // Your code here
}

Need a hint?

Return a <div> with two <p> elements showing Name: {name} and Window width: {width}.