Подскажите, как можно убрать лишний рендер, у меня имеется: <Template header={header}> {myComponent} </Template> myComponent

Question

Подскажите, как можно убрать лишний рендер, у меня имеется: <Template header={header}> {myComponent} </Template> myComponent

обернуто в memo и возвращает функцию с версткой (нет в зависимости header)

и имеется селектор который получает инфу о header
как только приходит новый header, он перерендывает ВСЁ.

Почему? Можно ли MyComponent не перерендывать (там же новых пропсов нету)

#frontend #javascript #programming #react.js #russian

0

22.10.2020

17 ответов

14 просмотров

Ivan 🧑‍🚀

https://overreacted.io/react-as-a-ui-runtime/#inversion-of-control

0

22.10.2020

Юрий Автор вопроса

Ivan 🧑‍🚀
myComponent — это выражение, которое ты вычисляешь...

понял и что тогда делать? Как правильно поступить? У меня внутри темплейта { View1 || View2} Каждый раз вызывается, каждый раз перерендывается, как это оптимизировать?

0

22.10.2020

Ivan 🧑‍🚀

Юрий
понял и что тогда делать? Как правильно поступить?...

<MyComponent /> вместо {myComponent}

0

22.10.2020

Юрий Автор вопроса

Ivan 🧑‍🚀
<MyComponent /> вместо {myComponent}

View 1 это const function = isView && <MyComponent/> View 2 это const function2 = switchCase на 10 разных компонентов

0

22.10.2020

Юрий Автор вопроса

Ivan 🧑‍🚀
<MyComponent /> вместо {myComponent}

поэтому хз как тут заменить, идей вообще нет

0

22.10.2020

Юрий Автор вопроса

Ivan 🧑‍🚀
<MyComponent /> вместо {myComponent}

я переписал свои 2 функции на компонент обертку, в котором эти 2 функции внутри и заюзал как <Component /> но этот <Component /> все равно рендерится когда меняться селектор

0

22.10.2020

Ivan 🧑‍🚀

Юрий
я переписал свои 2 функции на компонент обертку, в...

Ну так ты его мемоизируй :)

0

22.10.2020

Юрий Автор вопроса

Ivan 🧑‍🚀
Ну так ты его мемоизируй :)

методы внутри него или сам компонент?

0

22.10.2020