Ускорьте рендеринг с помощью React.memo

Если вы уже слышали о функциональном компоненте без состояния в React, вы можете заметить, что это просто функция, которая возвращает представление, без логики, без состояния внутри нее. Если мы укажем те же реквизиты в параметре, он вернет точно такое же представление.

Вот пример функционального компонента без сохранения состояния (SFC).

interface Props {
    label: string;
}
const MyButton = (props: Props) => {
    return (
        <TouchableOpacity>
            <Text>{props.label}</Text>
        </TouchableOpacity>
    );
}

Затем мы можем использовать нашу кнопку следующим образом:

<MyButton label="Press Me!!"/>

Каждый раз, когда мы используем кнопку, как в примере, с одними и теми же реквизитами везде в приложении, приложение всегда будет создавать новое представление/экземпляр, который на самом деле имеет точно такой же результат. Представьте, если у нас есть одна и та же кнопка с одним и тем же ярлыком более 10, 20 или более, в зависимости от того, насколько велико ваше приложение, оно может использовать больше ресурсов/процессора, чем вы думаете.

Мемоизация в помощь

Мемоизация — это метод программирования, который пытается повысить производительность функции за счет кэширования ее ранее вычисленных результатов. Каждый раз, когда вызывается мемоизированная функция, ее параметры используются для индексации кеша. Если данные присутствуют, то их можно вернуть, не выполняя всю функцию. Однако если данные не кэшируются, то функция выполняется, а результат добавляется в кэш.

React.памятка

React.memo — это компонент более высокого порядка. Это похоже на React.PureComponent, но для функциональных компонентов вместо классов.

Если ваш функциональный компонент отображает один и тот же результат при одних и тех же реквизитах, вы можете обернуть его вызовом React.memo для повышения производительности в некоторых случаях, запомнив результат. Это означает, что React пропустит рендеринг компонента и повторно использует последний результат рендеринга.

Теперь мы можем сделать нашу кнопку запоминаемым функциональным компонентом, просто передав нашу кнопку в React.memo следующим образом:

const MemoizedMyButton = React.memo(MyButton)

И мы можем использовать нашу новую кнопку следующим образом:

<MemoizedMyButton label="Press Me!!"/>

Ссылка