Summary - useCallback
- React course
- Intermediate
- Lesson 28/80
- 5 min
Pass a stable handler with useCallback to protect a memoized child.
Summary - useCallback
In this group you learned what useCallback is, how it works with React.memo, and its relationship with useMemo. Now you can safely manage stable references.
The recipe: wrap functions passed as props with useCallback, write the dependency array completely, avoid using it for small functions. Combined with React.memo it brings a serious speed boost.
In the next step you'll write a list component using useCallback + React.memo.
Practice Write MemoList
Complete the skeleton. Write an App component. Define count with useState(0), items with useState(["a","b"]). Define handleAdd with useCallback(() => setItems(prev => [...prev, "yeni"]), []). Show <button onClick={ '{ handleAdd }' }>Add</button> and <p>{ '{ count }' }</p>. Export it.
Starter code
import { useState, useCallback } from "react";
// Write the App component hereSample solution
import { useState, useCallback } from "react";
function App() {
const [count, setCount] = useState(0);
const [items, setItems] = useState(["a", "b"]);
const handleAdd = useCallback(() => setItems((prev) => [...prev, "yeni"]), []);
return (
<div>
<p>{count}</p>
<button onClick={handleAdd}>Add</button>
</div>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What do useCallback + React.memo together provide?
- Prevent needless child renders Correct answer
- Less code
- Better CSS
- Skip useEffect
Explanation: Together they prevent needless renders.
2 Match the useCallback recipe
| Term | Meaning |
|---|---|
function prop |
useCallback |
React.memo |
child |
deps |
complete |
small |
don't |