useCallback hook in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component using useCallback?

Consider this React component that uses useCallback. What will be logged when the button is clicked twice?

React

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

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

  const increment = useCallback(() => {
    console.log('Count before increment:', count);
    setCount(count + 1);
  }, []);

  return (
    <button onClick={increment}>Increment</button>
  );
}

export default Counter;

A Logs 'Count before increment: 0' both times the button is clicked.

B Logs 'Count before increment: 0' first click, then 'Count before increment: 1' second click.

C Logs 'Count before increment: 1' both times the button is clicked.

D Logs 'Count before increment: 0' first click, then 'Count before increment: 2' second click.

💡 Hint

Remember that useCallback with an empty dependency array keeps the same function instance and closes over the initial count value.

The increment function is created once with useCallback and an empty dependency array. It captures the initial count value (0). So every time it runs, it logs 0 before incrementing. The state updates, but the function does not see the updated count.

❓ state_output

intermediate

What is the value of count after clicking the button twice?

Given this React component, what will be the value of count after clicking the button two times?

React

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

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

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <button onClick={increment}>Increment</button>
  );
}

export default Counter;

A count will be 1

B count will be 2

C count will be 0

D count will be undefined

💡 Hint

Look at how setCount uses a function to update state.

The increment function uses the functional form of setCount, which always updates based on the latest state. So clicking twice increments count from 0 to 2.

📝 Syntax

advanced

Which option correctly uses useCallback to memoize a function depending on a prop?

Which code snippet correctly memoizes handleClick so it updates when propValue changes?

A const handleClick = useCallback(() => { console.log(propValue); }, []);

B const handleClick = useCallback(() => { console.log(propValue); }, [setPropValue]);

C const handleClick = useCallback(() => { console.log(propValue); });

D const handleClick = useCallback(() => { console.log(propValue); }, [propValue]);

💡 Hint

Think about which dependencies should be included to update the callback when props change.

Option D correctly includes propValue in the dependency array, so the callback updates when propValue changes. Option D never updates, C has no dependency array (runs every render, so no memoization), and D depends on a setter which is stable and unrelated.

🔧 Debug

advanced

Why does this useCallback hook cause a stale closure bug?

Examine this code. Why does the handleClick function always log the initial value of count?

React

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

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

  const handleClick = useCallback(() => {
    console.log(count);
  }, []);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={handleClick}>Log Count</button>
    </>
  );
}

export default Counter;

A Because count is updated asynchronously, the console.log always shows the previous value.

B Because setCount is not included in dependencies, the function does not update.

C Because useCallback has an empty dependency array, it captures the initial count value and never updates.

D Because handleClick is not called inside useEffect, it does not update.

💡 Hint

Think about how dependency arrays affect closures in hooks.

The empty dependency array means the callback is created once and closes over the initial count value. It never sees updates, so it always logs the initial count.

🧠 Conceptual

expert

Which statement best describes the purpose of useCallback in React?

Choose the best explanation for why and when to use useCallback in React components.

A <p>useCallback memoizes a function so it keeps the same reference between renders unless dependencies change, helping to avoid unnecessary re-renders in child components.</p>

B <p>useCallback automatically batches multiple state updates into one render to improve performance.</p>

C <p>useCallback forces React to re-render a component whenever a function changes.</p>

D <p>useCallback replaces useEffect to run side effects only when dependencies change.</p>

💡 Hint

Think about how React compares props and why function identity matters.

useCallback returns a memoized function that keeps the same reference unless dependencies change. This helps prevent child components from re-rendering unnecessarily when passed functions as props.