React Hooks useCallback Hook 2

Question 1

In the following code, what is `handleClick`?

const handleClick = useCallback(() => { doSomething(id); }, [id]);

Accepted Answer

A memoized function that only changes when `id` changes

Answer

handleClick is a memoized function that React will keep the same reference for as long as `id` does not change between renders.

Question 2

Which hook import is required to use useCallback?

Accepted Answer

import { useCallback } from 'react'

Answer

useCallback is a named export from the 'react' package and must be imported with destructuring.

Question 3

You have a parent component that re-renders frequently. A child component uses React.memo and receives a function prop. Without useCallback, what happens?

Accepted Answer

The child re-renders on every parent render because the function prop is a new reference each time

Answer

React.memo performs a shallow comparison; since a new function is created on each parent render, it's a different reference, causing the child to re-render despite React.memo.

Question 4

When should you NOT use useCallback?

Accepted Answer

When defining simple inline functions that are not passed as props or dependencies

Answer

useCallback adds overhead; for simple inline functions not used as props or hook dependencies, the memoization cost outweighs any benefit.

Question 5

How can you use useCallback with an async function?

Accepted Answer

Wrap the async function directly: useCallback(async () => { await fetch(...); }, [deps])

Answer

You can pass an async function directly to useCallback; it works the same way — the returned memoized callback will be an async function.

React Practice Test

React Practice Test

React Hooks useCallback Hook 2