Всем привет, подскажите пожалуйста есть страница (контейнер), на ней выводятся компоненты:

Question

Всем привет, подскажите пожалуйста есть страница (контейнер), на ней выводятся компоненты:

форма поиска и элементы (объекты). работает на редаксе, но, думаю, это не важно в этом случае
в контейнере есть обработчик для формы, состояние для инпутов и через connect() передаю элементы в компонент для элементов
----
вопрос: почему при изменении инпутов перерендеривается не только компонент формы, но и компонент с объектами? И правильная ли практика передавать пропсами в тупые компоненты от страницы (контейнера) вниз? На скрине сам контейнер в котором находятся состояние и все обработчики

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

0

21.10.2020

9 ответов

3 просмотра

Alexandr R Автор вопроса

Evgeny Mokeev 🏂
Потому что меняются props/state этого компонента и...

примерно так на рабочем примере выглядит, только array приходит из редакса https://codesandbox.io/s/determined-darkness-ljf2n?file=/src/App.js

0

21.10.2020

Alexandr R Автор вопроса

Evgeny Mokeev 🏂
Потому что меняются props/state этого компонента и...

это видно после включения в devtools Highlight updates when components render. Или это вообще норма, что так ререндерятся? можно ли это оптимизировать?

0

21.10.2020

Evgeny Mokeev 🏂

Alexandr R
примерно так на рабочем примере выглядит, только a...

Ну да, все верно. Родитель когда обновляется, то вызывает рендер чайлдов. Если ты хочешь этого избежать- оберни items в memo, тогда он будет проверять пропы на изменение https://ru.reactjs.org/docs/react-api.html#reactmemo

0

21.10.2020

Alexandr R Автор вопроса

Evgeny Mokeev 🏂
Ну да, все верно. Родитель когда обновляется, то в...

да, спасибо, уже читаю про memo. а это нормальная практика, когда большая часть всех компонентов будет обернута в memo?

0

21.10.2020

Volodymyr Klimov

Alexandr R
да, спасибо, уже читаю про memo. а это нормальная ...

Без надобности оборачивать не надо Количество рендеров просто так оптимизировать не надо

0

21.10.2020