关于 React.memo 和性能优化的问题

Question

Suppose I have long list (let's assume there is no pagination yet) where each list item has input and ability to update own value (as a part of collection). Let's say code looks something like that:

const initItems = [
    { id: 0, label: "Hello world" },
    ...
    { id: 100, label: "Goodby" }
];

function List() {
    const [items, setItems] = React.useState([...initItems]);

    const handleChange = React.useCallback((e, id) => {
        setItems(items.map(item => {
            if (item.id === id) {
                return {
                    ...item,
                    label: e.target.value
                }
            }

            return item;
        }));
    }, [items]);

    return (
        <ul>
            {items.map(({ id, label }) => {
                return (
                    <Item
                        id={id}
                        key={id}
                        label={label}
                        onChange={handleChange}
                    />
                )
            })}
        </ul>
    )
}

// Where Item component is:
const Item = React.memo(({ onChange, label, id }) => {
    console.log('Item render');

    return (
        <li>
            <input type="text" value={label} onChange={e => onChange(e, id)} />
        </li>
    )
});

Looks pretty straightforward, right? While wrapping Item component with React.memo() what I wanted to achieve is to avoid re-render of each Item when some of the Item 's gets updated. Well, I'm not sure it should works with this strategy, since each Item is a part of collection ( items ) and when I update any Item then items gets mapped and updated. What I did try - is to write custom areEqual method for Item component, where I do comparison of label value from props:

function areEqual(prev, next) {
    return prev.label === next.label;
}

however with this approach the behaviour of updating items breaks down completely and updating next item reset previous updates and so on (I even could not observe any pattern to explain).

So the question: is it possible to avoid re-rendering of every item in such collection while having ability to update value of individual item?

Answer 1

Your problem here that you change callback on each render. So, you change callback, it changes onChange and this, in turn, runs rerender. To avoid it you can use updater function with setState .

const handleChange = React.useCallback((e, id) => {
  // I made separate function so it would be easier to read
  // You can just write `(items) =>` before your `items.map` and it will work
  function updater(items) {
    // we have freshest items here
    return items.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          label: e.target.value,
        };
      }
      return item;
    });
  }
  // pass function
  setItems(upadter);
  // removed items from dependencies
}, []);

This way, your updater function will always get current value of state into parameters, and your props will update for actually updated item. Another solution would be to write custom updater that compares all values, but onChange . This is ok in short term, but this can become complex and cumbersome to maintain.

Here is live example: https://codesandbox.io/s/unruffled-johnson-ubz1l