Snippet

Performance-Optimierung mit useMemo

useMemo speichert das Ergebnis einer Berechnung zwischen Re-Renders zwischen und berechnet es nur neu, wenn sich eine der Abhängigkeiten ändert, was CPU-Zyklen spart.

snippet.js

javascript

const expensiveCalculation = (num: number) => {
  console.log('Calculating...');
  for (let i = 0; i < 1000000000; i++) {} // Simulate load
  return num * 2;
};
 
function Dashboard({ count }: { count: number }) {
  const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);
 
  return <div>Result: {memoizedValue}</div>;
}

nextjs

Erklärung

useMemo(() => ..., [count])

Führt die Funktion nur aus, wenn sich 'count' ändert.

expensiveCalculation(count)

Ein Platzhalter für jede Logik, die rechenintensiv ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Performance-Optimierung mit useMemo

Verwandt