Гайд по ре-рендерам React
В блоге Нади Макаревич вышел подробный гайд про ре-рендеры в React. В гайде рассказывается о том, какие бывают триггеры ре-рендера, приведены полезные паттерны для предотвращения ненужных ре-рендеров и показаны антипаттерны, которые ухудшают производительность приложения.
Есть несколько причин ре-рендера компонента в React:
- Изменение стейта.
- Ре-рендер родительского компонента.
- Изменено значение контекста.
- Изменение внутри хука. Изменения внутри хука будут отражаться на компоненте, который его использует.
Изменение пропсов не является причиной ре-рендера компонента, если не говорим о мемоизированных компонентах. Чтобы пропс изменился, нужно изменить стейт в родительском компоненте, что ведет к ре-рендеру компонента и его дочерних компонентов.
Одним из полезных паттернов предотвращения ре-рендера, особенно для тяжелых компонентов, является композиция и прокидывание компонента как проп. В базовом случае можно прокидывать компонент как children.
const ComponentWithScroll = ({ children }) => {
const [value, setValue] = useState({});
return (
<div onScroll={setValue}>
{children}
</div>
)
}
const App = () => {
return (
<ComponentWithScroll>
<HeavyComponent />
</ComponentWithScroll>
)
}
В компоненте ComponentWithScroll проп children не будет зависеть от изменения стейта и вследствие чего не будет происходить его ре-рендер.
Стоит учитывать, что сам по себе ре-рендер не является проблемой, т.к. изменения в DOM браузера происходят после фазы коммита в React. Однако слишком частый ре-рендер может привести к тормозам и фризам UI, из-за чего приложением будет сложно пользоваться, особенно на слабых устройствах.
www.developerway.com/posts/r…rs-guide
