Когда ты используешь render props с pure components, возникает фундаментальная несовместимость. Pure components полагаются на поверхностное сравнение пропсов, чтобы определить, нужно ли перерисовывать компонент. Но когда ты определяешь функцию прямо внутри метода render, это сравнение всегда возвращает false, и весь смысл использования pure component теряется.
Каждый раз когда компонент перерисовывается, создаётся новая ссылка на функцию, даже если логика функции остаётся одинаковой. Так как JavaScript рассматривает функции как объекты, поверхностное сравнение воспринимает это как другое значение пропса. Это вызывает ненужные перерисовки, которые съедают производительность и сводят на нет всю оптимизацию, которую даёт pure component.
Определи функцию render как метод экземпляра вместо того чтобы создавать её inline:
renderContent = (data) => {
return <div>{data.value}</div>;
}
render() {
return (
<PureComponent renderProp={this.renderContent} />
);
}
Такой подход гарантирует, что одна и та же ссылка на функцию передаётся при каждой перерисовке. Поверхностное сравнение увидит её как неизменённую и позволит pure component корректно пропускать ненужные перерисовки.
Если ты не можешь использовать методы экземпляра, рассмотри:
useCallbackГлавное — сохранять стабильные ссылки на функции между перерисовками, чтобы оптимизация pure component работала как надо.
Pure компоненты используют поверхностное сравнение props, чтобы пропустить re-renders, но inline render prop функции пересоздаются на каждом render, из-за чего сравнение падает и вызывает ненужные re-renders.
Новый — ещё не проверен сообществом
Вы