useCallback hook in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useCallback hook from React.

React

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

CuseRef

DuseCallback

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of useCallback

Forgetting to import useCallback

Importing useEffect by mistake

The useCallback hook is imported from React to memoize functions.

2fill in blank

medium

Complete the code to memoize the handleClick function using useCallback with an empty dependency array.

React

const handleClick = [1](() => {
  console.log('Clicked');
}, []);

Drag options to blanks, or click blank then click option'

AuseEffect

BuseMemo

CuseCallback

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useCallback

Using useMemo which memoizes values, not functions

Not passing a dependency array

useCallback memoizes the function so it doesn't get recreated on every render.

3fill in blank

hard

Fix the error in the useCallback dependency array to include the correct dependency.

React

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

Drag options to blanks, or click blank then click option'

AsetCount

Bcount

Cincrement

DuseCallback

Attempts:

3 left

💡 Hint

Common Mistakes

Putting setCount in dependencies instead of count

Leaving dependency array empty causing stale closure

Putting the function name itself in dependencies

The count variable is used inside the callback, so it must be in the dependency array.

4fill in blank

hard

Fill both blanks to create a memoized function that depends on 'value' and logs it.

React

const logValue = useCallback(() => {
  console.log([1]);
}, [[2]]);

Drag options to blanks, or click blank then click option'

Avalue

Bconsole.log

DlogValue

Attempts:

3 left

💡 Hint

Common Mistakes

Logging console.log instead of value

Not including value in dependency array

Including the function name in dependencies

The function logs value and depends on value to update correctly.

5fill in blank

hard

Fill both blanks to create a memoized function that adds 'a' and 'b' and depends on both.

React

const add = useCallback(() => {
  return [1] + [2];
}, [[1], [2]]);

Drag options to blanks, or click blank then click option'

Aa

Bb

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in the return statement and dependencies

Leaving dependency array empty

Using only one variable in dependencies

The function adds a and b, returns their sum, and depends on both.