8. Czym jest memoizacja?

Memoizacja to zapamiętywanie wyników obliczeń pomiędzy przeładowaniami komponentu.

Może być przydatna, gdy do komponentu przekazywana jest duża lista elementów, których filtrowanie/utworzenie wymaga dużych zasobów. Obliczenie w bloku kodu komponentu powodowałoby wykonanie tej samej funkcji za każdym renderowaniem komponentu. Memoizacja sprawia, że funkcja zostanie wykonana tylko wtedy, gdy zmieni się wartość wskazanych zmiennych.

Innym przypadkiem zastosowania jest moment, gdy wartość lub funkcja przekazywane są do dependency array innego hooka. Jeśli te wartości lub funkcje nie będą zmieniać się za każdym renderowaniem, hooki do których je przekazano również nie będą uruchamiane ponownie.

Do memoizacji wykorzystywane są hooki:

1. useMemo - zapisuje wartość wykonania funkcji

const Component: React.FC = ({list, ...props}}) => {

    const myList = useMemo(() => {
        return list.map(el => someComplexOperation(el));
    }, [list]); // change of variables set here will cause useMemo func to trigger again and overwrite myList value

    return <div>{myList}</div>
}

2. useCallback - zapisuje funkcję, a nie efekt jej wykonania. W innym wypadku funkcja byłaby deklarowana na nowo przy kaźdym renderowaniu

const Component: React.FC = ({list, ...props}}) => {

    const getCalculatedList = useCallback(() => {
        return props.list.map(el => someComplexOperation(el));
     }, [list]); // change of variables set here will cause useCallback func to trigger again and create new getCalculatedList function
        
    return <div>{getCalculatedList()}</div>
}

Innym przykładem memoizacji jest wykorzystanie funkcji memo. Pozwala na ominięcie przerenderowania komponentu, gdy nie zmieniły się jego własciwości (props). Przyjmuje ona komponent oraz opcjonalnie funkcję sprawdzającą, czy zmieniły się propsy:

interface Props {
    myProp: string
}

const MyComponent: React.FC<Props> = ({myProp}) => {
    ...
};

const didPropsChange = (oldProps: Props, newProps: Props) {
    ....
}

const MemoizedComponent = memo(MyComponent, didPropsChange) // didPropsChange is optional - shallow comparison of props is made by default

Dokumentacja odnośnie memo dostępna jest tutaj.