React: update one item in a list without recreating all items

You can do it by using any state management library, so that your Parent doesn't keep track of this.state.list => your List only re-renders when new Item is added. And the individual Item will re-render when they are updated.

Lets say you use redux.

Your code will become something like this:

// Parent.js
class Parent extends React.Component {
  render() {        
    return <List />;
  }
}

// List.js
class List extends React.Component {
  render() {        
    var list = this.props.list.map(item => {
      return <Item key={item.key} uniqueKey={item.key} />;
    });
    return <div>{list}</div>;
  }
}

const mapStateToProps = (state) => ({
  list: getList(state)
});

export default connect(mapStateToProps)(List);

// Item.js
class Item extends React.Component {
  shouldComponentUpdate() {
  }
  render() {
  }
}

const mapStateToProps = (state, ownProps) => ({
  item: getItemByKey(ownProps.uniqueKey)
});

export default connect(mapStateToProps)(Item);

Of course, you have to implement the reducer and the two selectors getList and getItemByKey.

With this, you List re-render will be trigger if new elements added, or if you change item.key (which you shouldn't)

EDIT:

My inital suggestions only addressed possible efficiency improvements to rendered lists and did not address the question about limiting the re-rendering of components as a result of the list changing.

See @xiaofan2406's answer for a clean solution to the original question.

Libraries that help make rendering long lists more efficient and easy:

React Infinite

React-Virtualized

When you change your data, react default operation is to render all children components, and creat virtual dom to judge which component is need to be rerender.

So, if we can let react know there is only one component need to be rerender. It can save times.

You can use shouldComponentsUpdate in your list component.

If in this function return false, react will not create vitual dom to judge.

I assume your data like this [{name: 'name_1'}, {name: 'name_2'}]

class Item extends React.Component {
  // you need judge if props and state have been changed, if not
  // execute return false;
  shouldComponentUpdate(nextProps, nextState) { 
    if (nextProps.name === this.props.name) return false;

    return true;
  }
  render() {
    return (
      <li>{this.props.name}</li>
   )
  }
}

As react just render what have been changed component. So if you just change one item's data, others will not do render.

React: update one item in a list without recreating all items

Related

Recent Posts