leashed component

leashed.js

export default class LeashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onChangeDebounce = _.debounce(value => this.props.onChange(value), 300);
  }
  onChange(e) {
    this.onChangeDebounce(e.target.value);
  }
  render () {
    return (
      <input onChange={this.onChange}/>
    );
  }
}

Hello @NoamELB! Thanks for the great article about React performance. 👍

It looks like there is a typo in the code above I believe. You should use the props passed to the constructor while creating the debounced handler in it.

It should read:
this.onChangeDebounce = _.debounce(value => props.onChange(value), 300);

Cheers!