Performance Optimization with useMemo

Showcase the use of useMemo hook to optimize performance issues in TanStack Config by memoizing computations that might otherwise cause unnecessary rerenders.

const expensiveCalculation = useMemo(() => computeExpensiveValue(a, b), [a, b]);

This code memoizes the result of computeExpensiveValue(a, b). It only re-computes when 'a' or 'b' changes, preventing unnecessary calculations on every render.

const memoizedComponent = useMemo(() => <HeavyComponent prop={value} />, [value]);

Here, useMemo is used to memorize a React component. 'HeavyComponent' will only re-render if 'value' changes, reducing the rendering workload.