How to render the leaf component of tree component without re-render entire tree in ReactJS

Question

Imaging there is a JS object containing the definition of the tree. The definition of leaf looks like:

{title:'leaf A'}

The tree JS object looks like:

{{title:'leaf A', children:{title:'children of leaf A'}}}

The tree component is rendered and I would like to change the title of a leaf component when some event fired on leaf component. This can be done easily by hooking the event handler of tree component to leaf component and re-render tree component using setState(). However, as such change does not cause the structure change of the tree, tt would be better not to re-render the entire tree but re-render the leaf component instead. Is it possible to achieve this in reactjs? As the result, the title of leaf in the JS object used for tree rendering should be changed/replaced as well.

Answer 1

You can use the shouldComponentUpdate method that accepts new props and new state and there you can decide if you want to re-render or not.

shouldComponentUpdate(nextProps, nextState) {

  // Update this component ONLY when the prop someProp changes
  if (this.props.someProp !== nextProps.someProp) {
    return true;
  }

  return false;
}

I recommend checking the high order component onlyUpdateForKeys from the recompose utility belt - https://github.com/acdlite/recompose