useCallback hook in React - Mini Project: Build & Apply

Using the useCallback Hook in React

📖 Scenario: You are building a simple React app that counts clicks on two buttons. You want to make sure the click handler functions do not get recreated unnecessarily to keep your app efficient.

🎯 Goal: Build a React component with two buttons that share a click handler function memoized using the useCallback hook.

📋 What You'll Learn

Create a state variable count initialized to 0

Create a function handleClick that increases count by 1

Use the useCallback hook to memoize handleClick with count as dependency

Render two buttons that both use handleClick as their onClick handler

Display the current count value in a <p> tag

💡 Why This Matters

🌍 Real World

Using useCallback helps keep React apps fast by preventing unnecessary function recreations, especially when passing functions to child components.

💼 Career

Understanding useCallback is important for React developers to write efficient, maintainable code and improve app performance.

1

Set up state with useState

Import useState from React and create a state variable called count initialized to 0 inside a functional component named ClickCounter.

React

import React, { useState } from 'react';

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

Need a hint?

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

2

Create the click handler function

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

React

import React, { useState } from 'react';

export default function ClickCounter() {
  const [count, setCount] = useState(0);

  // Create handleClick function to increase count by 1
  // Your code here
}

Need a hint?

Define handleClick as a function that calls setCount(count + 1).

3

Memoize the click handler with useCallback

Import useCallback from React and wrap the handleClick function with useCallback, passing count as a dependency.

React

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

export default function ClickCounter() {
  const [count, setCount] = useState(0);

  // Wrap handleClick with useCallback and count dependency
  // Your code here
}

Need a hint?

Use const handleClick = useCallback(() => { setCount(count + 1); }, [count]);.

4

Render buttons and display count

Render two <button> elements inside the component. Both buttons should use handleClick as their onClick handler. Also render a <p> tag that shows the current count value.

React

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

export default function ClickCounter() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  // Render two buttons with onClick=handleClick and a  showing count
  // Your code here
}

Need a hint?

Use JSX to render two buttons with onClick={handleClick} and a paragraph showing Count: {count}.