javascript / intermediate
Snippet
Performance-Optimierung mit useMemo
Der useMemo-Hook gibt einen memoisierten Wert zurück. Er berechnet den Wert nur neu, wenn sich eine der Abhängigkeiten geändert hat, wodurch teure Berechnungen bei jedem Rendern vermieden werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
const MemoizedComponent = ({ data }) => {const processedData = useMemo(() => {return data.map(item => ({...item,calculatedValue: complexCalculation(item.value)}));}, [data]);return <div>{processedData.length} items ready</div>;};
react
Erklärung
1
useMemo(() => { ... }, [data])
Das erste Argument ist die Funktion, die den Wert liefert, das zweite ist das Array der Abhängigkeiten.