A
A
Alex Polyakh2019-07-04 22:07:23
React
Alex Polyakh, 2019-07-04 22:07:23

One element changes in the list, all the rest are rendered (Immutable + memoize) ReactJS, what am I doing wrong?

One element in the list changes, all the rest are rendered (Immutable + memoize)
Fully finished example https://stackblitz.com/edit/react-lyx4ka?file=redu...
There is an array (OrderedMap from ImmutableJS) that contains an object with such data { id: 1, isActive: false, text: 'item-1' }. We store the list in store(redux) By clicking on the element, we change the value of the isActive field from false => true. I pass the immutable OrderedMap structure to the List component, then I store the object using the lodash/memoize function:
function normalizeList(list) { return list.valueSeq().toArray(); } const memoizeList = memoize(normalizeList); const handleSelectedItem = (id) => updateData(id);
List items are Item(components)
All elements are re-rendered after clicking on one of them, although if all fields are unchanged, this is not a new object (link to it).

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Petr Muhurov, 2019-07-05
@pterodaktil

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

it's worth looking into the console sometimes
PS components -> page -> Home -> components -> List -> components -> Item - this is not good
components -> Pages -> Home -> index.js
components -> List -> List.js, ListItem.js

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question