javascript / intermediate
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
1
2
3
4
5
6
7
8
9
10
11
const expensiveCalculation = (num: number) => {console.log('Calculating...');for (let i = 0; i < 1000000000; i++) {} // Simulate loadreturn num * 2;};function Dashboard({ count }: { count: number }) {const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);return <div>Result: {memoizedValue}</div>;}
nextjs
Erklärung
1
useMemo(() => ..., [count])
Führt die Funktion nur aus, wenn sich 'count' ändert.
2
expensiveCalculation(count)
Ein Platzhalter für jede Logik, die rechenintensiv ist.