Memoization i React

Introduktion

Memoization är en optimeringsteknik som används i React för att förbättra prestandan av applikationer. Detta uppnås genom att undvika onödiga beräkningar eller render. I React-ekosystemet finns det tre huvudsakliga verktyg för memoization: React.memo, useMemo och useCallback.

React.memo

Vad är React.memo?

React.memo är en högre ordningens komponent som omsluter en funktionell komponent och endast tillåter den att omrenderas när dess props ändras.

När ska man använda React.memo?

• När en komponent ofta renderar med samma props.
• För att förhindra onödiga render av barnkomponenter i en komponentträd.

Exempel

const MyComponent = React.memo((props) => {
    // Komponentlogik här
});

useMemo

Vad är useMemo?

useMemo är en hook som returnerar ett memoriserat värde. Den tar en “skaparfunktion” och en beroendelista.

När ska man använda useMemo?

• När det finns beräkningar som är dyra i prestanda.
• För att undvika onödig beräkning vid omrendering.

Exempel

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

Demo - useMemo

useCallback

Vad är useCallback?

useCallback är en hook som returnerar en memoriserad version av en callback-funktion. Den tar en funktion och en beroendelista.

När ska man använda useCallback?

• När du skickar callbacks till optimerade barnkomponenter.
• För att förhindra onödig omberäkning av funktioner.

Exempel

const memoizedCallback = useCallback(
    () => {
        doSomething(a, b);
    },
    [a, b],
);

Demo - useCallback

Sammanfattning

• React.memo används för att förhindra onödiga render av komponenter baserat på props.
• useMemo används för att memorera dyra beräknade värden.
• useCallback används för att memorera callback-funktioner.