Summary - useCallback

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.

Exercise 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.

Show example 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;

Test yourself

What do useCallback + React.memo together provide?
- Prevent needless child renders
- Less code
- Better CSS
- Skip useEffect
Show answer

Prevent needless child renders — Together they prevent needless renders.
Match the useCallback recipe

function prop

useCallback
React.memo

child
deps

complete
small

don't

Next lesson: What is React.memo?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies