shouldComponentUpdate(nextProps) {
  // expensive!
  return isDeepEqual(this.props, nextProps);
}

const newValue = {
    ...oldValue
    // any modifications you want to do
};


// fast check - only need to check references
newValue === oldValue; // false

// you can also use the Object.assign syntax if you prefer
const newValue2 = Object.assign({}, oldValue);

newValue2 === oldValue; // false

shouldComponentUpdate (nextProps) {
    // have any of the items changed?
    if(!isArrayEqual(this.props.items, nextProps.items)){
        return true;
    }
    // everything from here is horrible.

    // if interaction has not changed at all then when can return false (yay!)
    if(isObjectEqual(this.props.interaction, nextProps.interaction)){
        return false;
    }

    // at this point we know:
    //      1. the items have not changed
    //      2. the interaction has changed
    // we need to find out if the interaction change was relevant for us

    const wasItemSelected = this.props.items.any(item => {
        return item.id === this.props.interaction.selectedId
    });
    const isItemSelected = nextProps.items.any(item => {
        return item.id === nextProps.interaction.selectedId
    });

    // return true when something has changed
    // return false when nothing has changed
    return wasItemSelected !== isItemSelected;
}

// Data structure with good separation of concerns (normalised data)
const state = {
    items: [
        {
            id: 5,
            description: 'some really cool item'
        }
    ],

    // an object to represent the users interaction with the system
    interaction: {
        selectedId: 5
    }
};

class Heroes extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      ...
      lazyEditHero: null 
    }
  }
  async LoadEditForm() {
    const { default : EditHero } = await import('./EditHero');
    this.setState({ lazyEditHero: EditHero })
  }
  handleSelect = async hero => {
    await this.LoadEditForm();
    this.setState({ selectedHero: hero });
  }
  
  handleEnableAddMode = async () => {
    await this.LoadEditForm();
  this.setState({
      addingHero: true,
      selectedHero: { id: '', name: '', saying: '' }
    });
  }
  ...
  render() { 
    const EditHero = this.state.lazyEditHero;
    return (
      <div>
        ...
        <div className="editarea">
          <button onClick={this.handleEnableAddMode}>Add</button>
          {EditHero ? (
            <EditHero
              addingHero={this.state.addingHero}
              onChange={this.handleOnChange}
              selectedHero={this.state.selectedHero}
              onSave={this.handleSave}
              onCancel={this.handleCancel}
            />
          ) : (
            <div></div>
          )}
        </div>
      </div>
    );
  }
}

// BAD

export default (props, context) => {
    // ... do expensive compute on props ...

    return <SomeComponent {...props} />
}

// GOOD

import { pure } from 'recompose';

// See: https://github.com/acdlite/recompose#composition

// This won't be called when the props DONT change
export default pure((props, context) => {
    // ... do expensive compute on props ...

    return <SomeComponent someProp={props.someProp} />
})

// NEVER do this
render() {
  return <MyInput onChange={this.props.update.bind(this)} />;
}
// NEVER do this
render() {
  return <MyInput onChange={() => this.props.update()} />;
}
// Instead do this
onChange() {
    this.props.doUpdate()
}
render() {
  return <MyInput onChange={this.onChange}/>;
}

// NEVER do this, if there are no items, SubComponent will render every time!
render() {
    return <SubComponent items={this.props.items || []}/>
}
// This will avoid re-rendering
const EMPTY_ARRAY = []
render() {
    return <SubComponent items={this.props.items || EMPTY_ARRAY}/>
}