Callback functions for state updates in React - Mini Project: Build & Apply

Callback functions for state updates

📖 Scenario: You are building a simple React counter app. The app has a button that increases the count by 1 each time it is clicked. You want to update the count state safely using a callback function to avoid issues when multiple clicks happen quickly.

🎯 Goal: Create a React functional component called Counter that uses useState to hold a count starting at 0. Add a button that, when clicked, updates the count state by adding 1 using a callback function inside setCount.

📋 What You'll Learn

Create a React functional component named Counter

Use useState to create a state variable count initialized to 0

Add a button with the text Increment

Use a callback function inside setCount to update count by adding 1 when the button is clicked

Display the current count value in a <p> tag

💡 Why This Matters

🌍 Real World

Updating state safely with callback functions is important in React apps to avoid bugs when multiple updates happen quickly, such as in counters, forms, or live data.

💼 Career

React developers often use callback functions in state setters to ensure reliable updates, especially in interactive UI components.

1

Set up the initial state

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

React

import React, { useState } from 'react';

function Counter() {
  // Your code here
}

Need a hint?

Remember to import useState from React and call it inside your component to create count and setCount.

2

Add the increment button

Inside the Counter component, add a <button> element with the text Increment. This button will later update the count when clicked.

React

import React, { useState } from 'react';

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

  // Add a button with text 'Increment' below
}

Need a hint?

Wrap the button inside a return statement and JSX parentheses.

3

Add the callback function to update state

Add an onClick handler to the Increment button. Use setCount with a callback function that receives the previous count and returns the previous count plus 1.

React

import React, { useState } from 'react';

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

  return (
    Increment
  );
}

Need a hint?

Use an arrow function inside setCount to safely update the count based on the previous value.

4

Display the current count

Add a <p> tag inside the return that shows the text Count: followed by the current count value. Place it above the Increment button.

React

import React, { useState } from 'react';

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

  return (
    // Add a  tag to display count above the button
    
      {/* Your code here */}
       setCount(prevCount => prevCount + 1)}>Increment
    
  );
}

Need a hint?

Use a React fragment <></> to wrap multiple elements inside return.