Реакт - очень оптимизированный фреймворк, почти всегда реакт приложений работают отлично, быстро и в 60фпс благодаря Fiber. Но не редко встречаются компоненты которые отрисовывают большое количество данных, и если этот компонент будет ререндериться часто, приложение будет лагать.
Рассмотрим пример
Приложение на скрине ниже рендерит 30.000 смайлов на каждый ререндер, ререндеры происходят на каждое движение мышки из-за этого приложение лагает
На примере видно что приложение рендерится далеко не в 60 fps
Оптимизация
Нам нужно сделать так чтобы при изменении стейта mousePosition не ререндерился список из 30.000 элементов, вот какими способами это можно сделать
Пропс children
Теперь рендеринг снвоа в 60 fps
Вынести список в отдельный компонент
Вспомним в каких случаях происходит ререндер компонента
- Изменение стейта
- Изменение пропсов
- При ререндере родительского компонента дочерние компоненты будут ререндериться если они не мемоизированы
При такой структуре компонентов ничего не вызывает ререндер компонента и это не вияет на перфоманс
Не бойтесь декомпозировать компоненты и помните, что помимо мемоизации существует еще много более выгодных способов повысить производительность реакт приложения