React
useMemo vs useCallback
Learn the difference between the two hooks.
useMemo vs useCallback
The two hooks are similar but for different purposes: useMemo produces a value, useCallback keeps a function reference stable. In practice, useCallback(fn, deps) === useMemo(() => fn, deps).
For a function returning an object: const data = useMemo(() => ({ '{ a, b }' }), [a, b]) is right; useCallback would be wrong. For an event handler: const handler = useCallback(() => alert(a), [a]) is right.
A confusing case: useMemo(() => () => alert(a), [a]) also stabilizes a function. But useCallback is made for this case; it reads better.
Relationship between them
useCallback is actually a special case of useMemo. useCallback(fn, deps) and useMemo(() => fn, deps) give the same result. useCallback is just shorter and more readable.
Which to pick depends on code readability. For stabilizing a function, useCallback; for stabilizing an object or computation, useMemo. Both work with a dependency array.
The same cautions apply: they may add overhead for small computations and small functions. Avoid adding them everywhere without profiling. React is usually fast enough.
Exercise Handler with useCallback
Complete the skeleton. Write a SearchBar component. Define query with useState(""). Define handleChange with useCallback((e) => setQuery(e.target.value), []). Show <input value={ '{ query }' } onChange={ '{ handleChange }' } placeholder="Search" />. Export it.
Show example solution
import { useState, useCallback } from "react";
function SearchBar() {
const [query, setQuery] = useState("");
const handleChange = useCallback((e) => setQuery(e.target.value), []);
return <input value={query} onChange={handleChange} placeholder="Search" />;
}
export default SearchBar;
Test yourself
-
Which to stabilize an event handler?
- useState
- useMemo
- useRef
- useCallback
Show answer
useCallback — useCallback for an event handler.
-
Produce value
To produce a value, use ____.
Show answer
To produce a value, use useMemo.
-
Match useMemo and useCallback
- useMemo
- value
- useCallback
- function
- deps
- dependencies
- cache
- cache
Next lesson: Summary - useCallback
