<!--
title: memoize for render optimization
domain: app-frameworks
topic: Performance Optimization
language: TSX
source: TanStack/router
updated: 2024-11-19
url: https://awesomereviewers.com/reviewers/router-memoize-for-render-optimization/
-->

Use React memoization techniques strategically to prevent unnecessary re-renders and recomputations when values change infrequently. Apply React.memo to components that receive stable props, and useMemo for expensive computations that depend on rarely-changing values.

Removing memoization can significantly degrade performance by causing excessive re-renders. Conversely, adding memoization to frequently recomputed values that remain stable can provide substantial performance benefits.

Example of proper memoization:
```tsx
// Memoize component to prevent unnecessary re-renders
export const MatchInner = React.memo(function MatchInnerImpl({
  matchId,
}: { matchId: string }) {
  // Memoize expensive computation when dependencies are stable
  const Comp = useMemo(() => 
    route.options.component ?? router.options.defaultComponent,
    [route.options.component, router.options.defaultComponent]
  )
  
  return <Comp />
})
```

Focus memoization efforts on components and computations where the cost of re-execution outweighs the overhead of memoization checks.
