Style of item gets recycled

[marcocesarato]

Style of item gets recycled

[marcocesarato]

Hi @naraB, it's very simple.
Here an example:

import React, { useState } from "react";
import BigList from "react-native-big-list";
import { Checkbox } from "react-native-paper";

const data = [
    {label: '1', value: 1},
    {label: '2', value: 2},
    {label: '3', value: 3},
    {label: '4', value: 4},
    {label: '5', value: 5},
    {label: '6', value: 6}
]

const SelectList = () => {
  const [selected, setSelected] = useState();
  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        label={item.label}
        status={selected === item.value ? "checked" : "unchecked"}
        onPress={() => setSelected(item.value)}
      />
    );
  };

  return <BigList data={data} renderItem={renderItem} rowHeight={50} />
};

export default SelectList;

I'll publish also it on demo as demostration.

---

Update

• Here the demo example code: https://github.com/marcocesarato/react-native-big-list/blob/master/example/src/lists/SelectList.jsx
• Here the example (Press on Select List at the bottom of the page and click on item to select): https://marcocesarato.github.io/react-native-big-list/

[naraB]

With this example, every currently visible item gets rerendered. I tried using React.memo(..) with a custom propsAreEqual function to only rerender affected items but that seems to cause unexpected behavior.
Is there a way to use React.memo(ListItem, (prev, next) => prev.rerender === next.rerender) with react-native-big-list?
React.memo seems to only be not causing unexpected behavior when comparing the whole props object, like this: React.memo(ListItem, (prev, next) => prev === next) which rerenders every visible item as well.

[marcocesarato]

With this example, every currently visible item gets rerendered. I tried using React.memo(..) with a custom propsAreEqual function to only rerender affected items but that seems to cause unexpected behavior.
Is there a way to use React.memo(ListItem, (prev, next) => prev.rerender === next.rerender) with react-native-big-list?
React.memo seems to only be not causing unexpected behavior when comparing the whole props object, like this: React.memo(ListItem, (prev, next) => prev === next) which rerenders every visible item as well.

You meaning that item are re-rendered when you scroll (that is normal because the parent view is recycled but what is inside is destroyed), or you meaning that re-rendered because the example is single item selectable (that is normal because you need to update the others selected items to unchecked the previous checked)?

---

Update

Ok, now I understand your issue selecting multiple items and using an internal state on the view. The recycled view mantain the previous item status for that specifc index position, so you need to update every visible items using a state over the list.

Here an example:

import React, { useState } from "react";
import BigList from "react-native-big-list";
import { Checkbox } from "react-native-paper";

const data = [
  {label: '1', value: 1},
  {label: '2', value: 2},
  {label: '3', value: 3},
  {label: '4', value: 4},
  {label: '5', value: 5},
  {label: '6', value: 6}
];

const MultiSelectList = () => {
  const [selected, setSelected] = useState([]);

  const onSelect = (value, isSelected) => {
    if (!isSelected) {
      const selectedIndex = selected.indexOf(value);
      const newSelectedItems = [...selected];
      newSelectedItems.splice(selectedIndex, 1);
      setSelected(newSelectedItems);
    } else {
      setSelected([...selected, value]);
    }

    // TODO: your logics
    
    console.log(
        "The value",
        value,
        "is " + (isSelected ? "selected" : "unselected"),
    );
  };

  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        mode="ios"
        label={item.title}
        status={selected.includes(item.id) ? "checked" : "unchecked"}
        onPress={() => {
          onSelect(item.id, !selected.includes(item.id));
        }}
      />
    );
  };

  return <BigList data={data} renderItem={renderItem} rowHeight={50} />;
};

export default MultiSelectList ;

[naraB]

Sorry @marcocesarato, I should have created a snack to make sure you understand what I mean.

Please have a look at this https://snack.expo.io/@narab/big-list-example

Essentially, I would like wrap my list item component inside of React.memo(..) to minimize rerenders but it is causing unexpected behaviors.

[marcocesarato]

As said before, this is normal because the parent view is recycled, so when the batch of visible items changes, the item view mantain its internal state, but its children are destroyed (renderItem view).

However when updating the selected element the state of all visible elements must change (to detect whether the element is selected or not) and then must be render again because all elements must be controlled by a state over the list (because the state of children will be destroyed during recycling and then lost).

This recycle method improve memory performances over thousands items, but yes they re-render everytime you change the global state. To re-render less items at once (if you have a heavy item view) you can set batchSizeThreshold to 0.5 (min value).

The difference from FlatList is that you re-render only visible items and not all items loaded before because FlatList increment the number of views loaded when you scroll, instead this list mantain the same number of views when you scroll because are recycled.

[marcocesarato]

Hi @naraB, on release 1.3.13 using keyExtractor state should change without be recycled. Let me know if it works for you.