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:
// 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.
Enter the URL of a public GitHub repository