Какова обычная практика использования мемоизации компонента в Реакт?

Question

[Дмитрий]

Допустим у меня внутри компонента есть такая часть

<div>
  {items.map(item => <Item item={item}>)}
</div>

и данный массив items содержит большое число элементов.

Имеет ли смысл этот div мемоизировать при условии что дорогих вычислений в компоненте Item нет? То бишь если реакт получит мемоизированный jsx с тэгом div и парой сотен вложенных Item, станет ли он проверять существующий в DOMе div на соответствие атрибутов всех детей, или просто оставит все как есть, поскольку сама ссылка jsx не поменялась?

Надеюсь понятно объяснил

Answer 1

[profesor08]

Хук useMemo вторым аргументом принимает список зависимостей. У тебя, в качестве зависимости, будет items. И когда в компонент прилетит новый items, твой хук заново перестроит элементы. Так что, в данном случае, толку от него нет. Тебе скорее всего придется применять его для компонента Item, чтоб не обновлять его, если переданные в него данные не изменились.

Comments

[Дмитрий]

И когда в компонент прилетит новый items, твой хук заново перестроит элементы.

Толк есть в том случае, если в компоненте где это все выводится еще 5 свойств, помимо items, влияющих на рендеринг. Ну и вопрос вы не поняли: дает ли мемоизированный jsx команду реакту, что весь блок в DOM со всеми его чилдренами проверять вообще не надо и тогда мемоизация имела смысл, либо же он все равно будет сверять свойства jsx и всех его чилдренов до 10 колена и тогда мемоизация смысла не имеет, так как в самой функции-компоненте затратных операций нет.

Ну я конечно могу наверное дебаггером сам посмотреть, но интересней на форуме найти, вдруг кто уже знает.

[profesor08]

ну ок.

дает ли мемоизированный jsx команду реакту

не дает команд

либо же он все равно будет сверять свойства jsx и всех его чилдренов

ничего не сверяет

Это хук. А хук это некоторая реакция на некоторые действия.