В списке меняется один элемент, происходит рендер все остальных(Immutable + memoize) ReactJS, что не так делаю?

Question

[Alex Polyakh]

В списке меняется один элемент, происходит рендер все остальных(Immutable + memoize)

Полностью готовый пример https://stackblitz.com/edit/react-lyx4ka?file=redu...

Есть массив(OrderedMap из ImmutableJS), который содержит объект с такими данными { id: 1, isActive: false, text: ‘item-1’ }. Список мы храним в store(redux) По нажатию на элемент, мы меняем значение поля isActive с false => true. В компонент List передую имутабельную структуру OrderedMap, после с помощью функции lodash/memoize запоминаю объект:

function normalizeList(list) { return list.valueSeq().toArray(); } const memoizeList = memoize(normalizeList); const handleSelectedItem = (id) => updateData(id);

Элементы списка это Item(компоненты)

Происходит перерендер всех элементов после нажатия на один из них, хотя если все поля без изменений это не новый объект(ссылка на него).

Comments

[Алексей П]

Может быть я не понял вопроса?
но вижу, что перерисовывются толька 2 компонента.
через dev tools можно проверить, что перерисовывается

[Петр Мухуров]

посмотри useMemo, замемоизируй ListItem

[Alex Polyakh]

Алексей П, Не совсем так, откройте пожалуйста консоль, там будет видно.

Answer 1

[Петр Мухуров]

return <Item
          onClick={handleSelectedItem.bind(List, item.id)}
          key={item.key}
          isActive={item.isActive}
          text={item.text}
        />

key={item.id}
стоит заглядывать в консоль иногда
P.S. components -> page -> Home -> components -> List -> components -> Item - это нехорошо
components -> Pages -> Home -> index.js
components -> List -> List.js, ListItem.js

Comments

[Alex Polyakh]

Согласен, id не лучший вариант в данной ситуации, text не меняеться.
Поставил key={text} как это решило проблему ?

Дело вкуса:
P.S. components -> page -> Home -> components -> List -> components -> Item

[Петр Мухуров]

Alex Polyakh, почему вкуса?) Это скорее дело правильной структуризации файлов. Если вам нужно будет переюзать этот List?
key={text} не решит проблему, у вас в коде стоит key={item.key}, а у item нет поля key, нужно поставить id. А если это не убрало проблему - нужно лезть глубже и смотреть, где и что не так.
Кроме того, в рендере List у вас

const handleSelectedItem = (id) => {
    console.log('one click')
    updateData(id)
  };

т. е. при каждом рендере у вас будет заново создаваться функция handleSelectedItem, и, соответственно, будет меняться prop у ListItem, что будет вызывать перерисовку, поскольку изменилась ссылка на функцию. И таких мест куча

[Alex Polyakh]

Петр Мухуров, У вас часто в проектах, получалось переюзать List?))