react-bits:shouldComponentUpdate() check

shouldComponentUpdateを使用すると、reactコンポーネントのpropsとstateが高価に変更されると、重複レンダリングがトリガーされ、ページ全体が変更されるたびにブラウザに大きな負担がかかります.renderの前にshouldComponentUpdateがトリガーされ、propsとstateが変更されたかどうかを手動で判断し、trueまたはfalseが返されます.falseはレンダリングをトリガーしません.
bad

const AutocompleteItem = (props) => {
  const selectedClass = props.selected === true ? "selected" : "";
  var path = parseUri(props.url).path;
  path = path.length <= 0 ? props.url : "..." + path;

  return (
    
.onMouseLeave}
      className={selectedClass}>
      "ion-ios-eye"
         data-image={props.image}
         data-url={props.url}
         data-title={props.title}
         onClick={props.handlePlanetViewClick}/>
      .onMouseEnter}
      >
        
"dot bg-mint"/>
        {path}
      
    
  );
}; 
  
good
 
  
export default class AutocompleteItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextProps.url !== this.props.url ||
      nextProps.selected !== this.props.selected
    ) {
      return true;
    }
    return false;
  }

  render() {
    const {props} = this;
    const selectedClass = props.selected === true ? "selected" : "";
    var path = parseUri(props.url).path;
    path = path.length <= 0 ? props.url : "..." + path;

    return (
      

        "ion-ios-eye"
           data-image={props.image}
           data-url={props.url}
           data-title={props.title}
           onClick={props.handlePlanetViewClick}/>
        
          <div className="dot bg-mint"/>
          {path}
        
      
    );
  }
}