NoamELB

static getDerivedStateFromProps(props, state) {
  let newState = null;
  if (props.value !== state.prevValue) {
    newState = { prevValue: props.value };
    if (props.value !== state.value) {
      newState.value = props.value;
    }
  }
  return newState;
}

NoamELB

class ShouldNotUpdate extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.type !== nextProps.type;    
  }
  
  render() {
    return 'I am rendering...';
  }
}

NoamELB

static getDerivedStateFromProps(props, state) {
    return makeControllable(props, state, 'value');
}

NoamELB

  componentWillReceiveProps(nextProps) {
    const { value } = nextProps;
    if (this.props.value !== value && this.state.value !== value) {
      this.setState({ value });
    }
  }

NoamELB

  selectTab(e, value) {
    this.props.onChange(e, value);
  }

NoamELB

  isSelected(tab) {
    return tab.props.value === this.props.value;
  }

NoamELB

  selectTab(e, value) {
    this.setState({ value });
    this.props.onChange(e, value);
  }

NoamELB

  isSelected(tab) {
    return tab.props.value === this.state.value;
  }

NoamELB

  getHeader(tabs) {
    return tabs.map((tab, i) => {
      const style = this.isSelected(tab) ? activeTabHeaderStyle : tabHeaderStyle;
      return (
        <span
          key={tab.props.value}
          onClick={e => this.selectTab(e, tab.props.value)}
          style={i === 0 ? style : Object.assign({}, style, sideHeaderStyle)}
        >
          {tab.props.header}

NoamELB

<Tabs>
  <Tab value="banana" header="Banana Header">Banana</Tab>
  <Tab value="apple" header="Apple Header">Apple</Tab>
</Tabs>