useCallback optimization in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useCallback hook from React.

React Native

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

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

AuseState

BuseEffect

CuseCallback

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of useCallback

Forgetting to import useCallback

The useCallback hook is imported from React to memoize functions and optimize performance.

2fill in blank

medium

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

React Native

const handlePress = [1](() => {
  console.log('Button pressed');
}, []);

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

AuseCallback

BuseEffect

CuseMemo

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useCallback

Not passing the dependency array

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

3fill in blank

hard

Fix the error in the dependency array to correctly update the memoized function when count changes.

React Native

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

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

Acount

Bincrement

CsetCount

DuseCallback

Attempts:

3 left

💡 Hint

Common Mistakes

Putting setCount in dependencies instead of count

Leaving dependency array empty

The dependency array must include count so the function updates when count changes.

4fill in blank

hard

Fill both blanks to create a memoized callback that uses userId inside and includes it in dependencies.

React Native

const fetchUserData = useCallback(() => {
  fetchData([1]);
}, [[2]]);

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

AuserId

BfetchData

Cuser

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names

Putting fetchData instead of userId in dependencies

The callback uses userId inside, so userId must be included in the dependency array to avoid stale closures. fetchData is stable.

5fill in blank

hard

Fill all three blanks to create a memoized function that toggles a boolean state and depends on isActive.

React Native

const toggleActive = useCallback(() => {
  [1](![2]);
}, [[3]]);

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

AsetIsActive

BisActive

CsetActive

DisActiveState

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong setter function name

Putting setIsActive in dependencies instead of isActive

The function calls setIsActive with the opposite of isActive. The dependency array must include isActive so the function uses the current value and avoids stale closures. setIsActive is stable.