Function identity distinguishes one function value from another. A function defined inside a component is recreated on every render, so a child receiving it as a prop can observe a new value even when its behavior is unchanged. section 6.5
Identity matters when functions participate in rendering or effect dependencies:
- Updater functions returned by useState or useReducer have stable identity. section 6.5.1
- Custom updater functions can change identity on every parent render, causing dependent effects to run again. section 6.5.1
- useCallback returns the same function until one of its dependencies changes. section 6.5.2
Preventing repeated data fetches
BookablesView passes a custom updateBookable function to BookablesList. Without memoization, selecting the first fetched bookable re-renders the parent, creates a new function, retriggers BookablesList’s useEffect, and repeats the fetch. Wrapping the handler in useCallback with an empty dependency list keeps the prop stable. section 6.5.1 section 6.5.2
Listing 6.17 Maintaining a stable function identity with useCallback
import {useState, useCallback, Fragment} from "react"; #1
import BookablesList from "./BookablesList";
import BookableDetails from "./BookableDetails";
export default function BookablesView () {
const [bookable, setBookable] = useState();
const updateBookable = useCallback(selected => { #2
if (selected) {
selected.lastShown = Date.now();
setBookable(selected);
}
}, []); #3
return (
<Fragment>
<BookablesList bookable={bookable} setBookable={updateBookable}/> #4
<BookableDetails bookable={bookable}/>
</Fragment>
);
}
#1 Import the useCallback hook.
#2 Pass the updater function to useCallback.
#3 Specify the dependencies.
#4 Assign the stable function as a prop.
Shows importing useCallback, memoizing the updater, declaring dependencies, and passing the stable function as a prop. section 6.5.2
