Эта статья проливает свет на десять из этих скрытых функций, а также содержит фрагменты кода, демонстрирующие неправильное и правильное использование.

{ВАЖНО: ВТОРОЙ ФРАГМЕНТ КОДА ОТОБРАЖАЕТ ПРАВИЛЬНЫЙ МЕТОД КАЖДОЙ ФУНКЦИИ

1. Реагировать.memo

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

Факт. Распространенным заблуждением является то, что React.memo – это форма кэширования. Однако он не кэширует компонент, а запоминает визуализированный вывод переданного компонента, предотвращая ненужный рендеринг.

2. Пакетные обновления

По умолчанию React объединяет несколько обновлений состояния в функциональных компонентах в один повторный рендеринг. Но в компонентах класса или асинхронном коде такая автоматическая пакетная обработка может не произойти. Введите нестабильный_batchedUpdates.

Факт: префикс «unstable_» не означает, что система ненадежна; это признак того, что API может измениться в будущих версиях React.

3. React.lazy и саспенс

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

Факт: согласно некоторым тестам, с помощью React.lazy вы можете сократить время начальной загрузки до 35 %.