Dependency array usage in React - Mini Project: Build & Apply

Understanding Dependency Array Usage in React useEffect

📖 Scenario: You are building a simple React component that shows a counter and updates the document title whenever the counter changes.

🎯 Goal: Create a React functional component that uses useEffect with a dependency array to update the document title only when the counter changes.

📋 What You'll Learn

Create a state variable called count initialized to 0 using useState

Create a variable called increment that increases count by 1 when called

Use useEffect with a dependency array containing count to update document.title

Render a button that calls increment when clicked and displays the current count

💡 Why This Matters

🌍 Real World

Updating the document title based on user interaction is common in web apps to show notifications or status.

💼 Career

Understanding useEffect and dependency arrays is essential for React developers to manage side effects efficiently and avoid bugs.

1

Set up the initial React component with state

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

React

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

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

Need a hint?

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

2

Add an increment function to update the count

Inside the Counter component, create a function called increment that calls setCount to increase count by 1.

React

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

function Counter() {
    const [count, setCount] = useState(0);
    // Create increment function to add 1 to count
    // Your code here
}

Need a hint?

Define increment as an arrow function that calls setCount(count + 1).

3

Use useEffect with dependency array to update document title

Inside the Counter component, add a useEffect hook that updates document.title to `Count: ${count}`. Include count in the dependency array.

React

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

function Counter() {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);
    // Add useEffect to update document.title when count changes
    // Your code here
}

Need a hint?

Use useEffect(() => { document.title = `Count: ${count}`; }, [count]); to update the title only when count changes.

4

Render a button to increment count and display count value

Inside the Counter component, return a <button> element that shows the text Count: {count} and calls increment when clicked.

React

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

function Counter() {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);

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

    // Return a button that shows count and calls increment on click
    // Your code here
}

Need a hint?

Return a button element with onClick={increment} and text Count: {count}.