react / redux debounce throttling

Question

I'm trying to debounce a component in my webapp. Actually it is a filter for the maxPrice and if the user starts to print, the filter starts to work and all the results disappear until there is a reasonable number behind it.

What I tried so far:

import _ from 'lodash'

class MaxPrice extends Component {
  onSet = ({ target: { value }}) => {
    if (isNaN(Number(value))) return;

    this.setState({ value }, () => {
        this.props.updateMaxPrice(value.trim());
    });
  };

  render() {
    const updateMaxPrice = _.debounce(e => {
      this.onSet(e);
    }, 1000);

    return (
      <div>
        <ControlLabel>Preis bis</ControlLabel><br />
        <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
          onChange={updateMaxPrice} value={this.props.maxPrice}
        />
      </div>
    );
  }
}

I'm getting the error

MaxPrice.js:11 Uncaught TypeError: Cannot read property 'value' of null
at MaxPrice._this.onSet (MaxPrice.js:11)
at MaxPrice.js:21
at invokeFunc (lodash.js:10350)
at trailingEdge (lodash.js:10397)
at timerExpired (lodash.js:10385)

In my old version I had onChange={this.onSet} and it worked.

Any idea what might be wrong?

I'm using redux and the reducer should actually set the state. It worked before I added the debounce component. this.props.maxPrice is given through redux. — MichaelRazum, May 18 '17 at 21:48
No, redux has nothing to do with state. Redux only provide props on connected component. — Mas Bagol, May 18 '17 at 21:49
OK as I understand redux provides the default value through this.props.maxPrice. In my application it is just an empty string. Is there another state that I should take care on? — MichaelRazum, May 18 '17 at 21:51
maybe I should somhow persist the event. Getting that I should use event.persist() ? — MichaelRazum, May 18 '17 at 22:05

lunochkin · Accepted Answer · 2017-05-18T22:18:26.357

As you mentioned in comments, it's required to use event.persist() to use event object in async way:

https://facebook.github.io/react/docs/events.html

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

It means such code, for example:

onChange={e => {
  e.persist();
  updateMaxPrice(e);
}}

score 0 · Answer 2 · answered May 19 '17 at 18:47

Here is my final solution. Thanks to lunochkin!

I had to introduce a second redux variable so that the user see's the values he is entering. The second variable is debounced so that the WepApp waits a bit to update.

class MaxPrice extends Component {

  updateMaxPriceRedux = _.debounce((value) => { // this can also dispatch a redux action
      this.props.updateMaxPrice(value);
  }, 500);

  onSet = ({ target: { value }}) => {
    console.log(value);
    if (isNaN(Number(value))) return;
    this.props.updateInternalMaxPrice(value.trim());
    this.updateMaxPriceRedux(value.trim());
  };

    render() {
        return (
            <div>
                <ControlLabel>Preis bis</ControlLabel><br />
                <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
                             onChange={e => {
                                 e.persist();
                                 this.onSet(e);
                             }} value={this.props.internalMaxPrice}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        maxPrice: state.maxPrice,
        internalMaxPrice: state.internalMaxPrice
    };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators({updateMaxPrice:updateMaxPrice,
        updateInternalMaxPrice:updateInternalMaxPrice}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MaxPrice);

react / redux debounce throttling

2 Answers2