useMemo
Memoize computed values:
tsx
const visibleItems = useMemo(() => {
return items.filter(item => item.visible);
}, [items]);useCallback
Memoize function references:
tsx
const onSave = useCallback(() => {
saveForm(form);
}, [form]);When to use
Use memoization only when:
- A costly computation is repeated
- Child renders depend on stable function/object references
Avoid premature optimization
Memoization adds complexity. Profile first, optimize second.
Next, we will build custom hooks.