Frontend35-55 min
React Memoization with useMemo and useCallback
Profile first, stabilize expensive values, avoid stale closures, and keep memoization readable.
ReactReact DevToolsTypeScript
Prerequisites
- A React component with slow rendering or repeated child renders.
- React DevTools Profiler installed.
- A realistic interaction to profile.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run dev
# Open React DevTools Profiler and record the slow interaction.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Profile the interaction before changing code.
- Memoize expensive derived values that recalculate on unrelated renders.
- Use `useCallback` when callback identity causes memoized children to rerender.
- Keep dependency arrays complete to avoid stale data bugs.
- Profile again and remove memoization that does not improve behavior.
Implementation snippet
const filteredRows = useMemo(() => {
return rows.filter((row) => row.name.includes(search));
}, [rows, search]);
const handleSelect = useCallback((id: string) => {
setSelectedId(id);
}, []);4
Handle edge cases
Checklist
- Memoization is attached to measured slow paths.
- Dependency arrays include every referenced value.
- Small cheap calculations are not over-optimized.
- Child components use `React.memo` only where prop stability matters.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.