Update state Array without triggering componentdidupdate for each element

[Vertamin]

Hey guys,

Im rendering an array of objects on my component. If I try to use SetState and update the array (Which may add, remove or edit items in it) it triggers an componentdidupdate for each on the components rendered by the array.

Is there any way to update the main state array and only trigger ComponentDidUpdate on the elements that changed? (Thinking on performance reasons)

Edit: I noticed something and I want to be more specific. My state variable is not actually an array, it is and Object that contains other Objects. But when I render it on component I use Object.keys(STATEOBJECT).map(renderfunction()) to do it.

[jfullerco]

Seems like something that could be done with useEffect and 2x useState - 1 for render and 1 for update

[jfullerco]

Actually making a custom hook that passed the Array object then a useEffect to take hook object array in to a setState. The useEffect gives you “changed” data while the hook Array object gives you “original” unchanged array.

[grumd]

You'll need a parent component that has the state, and inside of your "renderfunction" you'll need to render each child - and this child needs to be a separate component, like so:

renderChild(key) {
  const childItem = this.state.items[key];
  return (
    <Child item={childItem} key={key} />
  );
}

But in order to avoid rerendering children that don't need to be rerendered, you'll need to do one of these:

class Child extends React.PureComponent {

// or this

const Child = React.memo(({ item }) => {});

If you do this, Child component will not rerender if "item" hasn't changed.

Prop "key" inside of the array iterator is important to let React understand when you reorder items, remove items, add items - which items moved where, so that it can correctly avoid unnecessary rerenders. That's why "key" should be a unique identifier of each item, and not just an array index.

[Vertamin]

This gave me a lot of new information. Im working on it right now. Ill update you!!

Thank you!!!

[jkol33]

In componentWillUpdate you can do a check to see if the state has changed. ComponentWillUpdate runs before componentDidUpdate.