Lesson 19 — useCallback

Keep the same function between renders

Each render creates brand-new functions, so a child wrapped in memo (which skips re-rendering when its props are unchanged) still re-renders — the function prop looks "new" every time. useCallback(fn, [deps]) returns the same function object until a dependency changes, so memo can do its job.

const save = useCallback(() => api.save(id), [id]);
<SaveButton onSave={save} />

Why it matters: in big lists and dashboards this stops hundreds of needless re-renders.