useCallback hook in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useCallback hook in React?

The useCallback hook is used to remember a function between renders. It helps avoid recreating functions unnecessarily, which can improve performance especially when passing functions to child components.

beginner

How do you use useCallback to memoize a function that depends on a state variable count?

You wrap the function with <code>useCallback</code> and list <code>count</code> in the dependency array like this: <br><pre>const memoizedFn = useCallback(() =&gt; { console.log(count); }, [count]);</pre>

intermediate

What happens if you pass an empty dependency array [] to useCallback?

The function is created once and never recreated again during the component's lifetime. It always uses the initial values from when it was created.

intermediate

Why might you want to use useCallback when passing functions to child components?

Because React compares props to decide if a child should update. If you pass a new function every time, the child thinks props changed and re-renders. useCallback keeps the same function reference if dependencies don’t change, preventing unnecessary child re-renders.

advanced

Can useCallback improve performance in all cases? Why or why not?

No. Using useCallback adds some overhead to remember the function. It helps mainly when passing functions to memoized children or expensive computations. For simple cases, it might not improve and can even slow down slightly.

What does useCallback return?

A A memoized version of the callback function

B A new component

C A state variable

D A side effect

useCallback returns a memoized function that only changes if its dependencies change.

Which of these is a correct way to use useCallback?

A useCallback(() => { doSomething(); })

B useCallback(doSomething(), [])

C useCallback(doSomething)

D useCallback(() => { doSomething(); }, [dependency])

You pass a function and a dependency array to useCallback. Option D shows the correct syntax.

What happens if you omit the dependency array in useCallback?

A The function is memoized forever

B The function is recreated on every render

C React throws an error

D The function is created once and never updated

Without dependencies, useCallback recreates the function every render, defeating its purpose.

Why is it useful to memoize functions passed as props to child components?

A To make the function run faster

B To increase the size of the app

C To prevent unnecessary child re-renders

D To change the child component's state

Memoizing functions keeps the same reference, so children don’t re-render if props don’t change.

Which hook is often used together with useCallback to optimize child components?

A React.memo

B useMemo

C useState

D useEffect

React.memo memoizes components and works well with useCallback to avoid unnecessary renders.

Explain how useCallback helps improve performance in React applications.

Think about how React decides to re-render children when props change.

Describe the correct way to use useCallback and what happens if dependencies change or stay the same.

Focus on the role of the dependency array in <code>useCallback</code>.