Binding 'this' in onUpdate callback causes infinite render 'call stack exceeded' about react-nouislider

[darkalor]

@vvo Sorry, I interpreted your response wrong. I'll try to provide some more details and a possible solution during the weekend, when I have the time for that.

In short, my solution is to change your componentDidUpdate handling that always re-created the slider to:

• check if new settings were received
• if anything changed, check if any of the changes require re-creating the slider
• otherwise just apply changes via updateOptions/re-attach events/set handle values

[vvo]

Hi @james-dowell, thanks for reporting this.

Could you first maybe have a look at http://react-component.github.io/slider/ which is a more React friendly slider than react-nouislider?

Then if you really want to use react-nouislider, maybe you could dig more into the issue because we never encountered such issue.

[james-dowell]

Hi @vvo,

Thanks for getting back to me :)

Yeah, I'm not sure the http://react-component.github.io/slider/ is going to cut it but thanks for the suggestion.

I'll do some more investigation into it and just have a play to see if I can get it to work. If you have any thoughts or pointers in the meantime let me know, likewise I'll report back if I get to the bottom of the issue or get a workaround.

All the best!

[james-dowell]

Okay, so I have done something rather horrible to get it working.. not sure I can leave it like this but for clarity's sake I'll post my findings.

Forgetting the binding of this, if I force the component to not update then I have the desired effect. It appears as if the callback I pass down for either 'onChange' or 'onUpdate' is invoked when the slider is rendered. which triggers my update method to run. Calling onChange method on redux-form (somehow - not sure about this yet) then triggers a re-render of my component.. which creates a circular dependency.

In some ways forcing the component to not update makes sense as I want nouislider to handle the changing and controlling of the slider but it feels really wrong and dangerous to have something like the following:

    shouldComponentUpdate() {
        return false;
    }

Not sure if that has sparked an idea for anyone, or if anyone has a better solution but I'm all ears.

Cheers,

[darkalor]

Steps:

1. Add onUpdate() handler function in a parent component, that modifies that component's state
2. Create a slider, and give it that onUpdate handler
3. As per noUiSlider docs - onUpdate is called instantly, when attached
4. onUpdate() modifies the parent components state, and react calls it's render function
5. In React the parent's render causes the child (slider) to render, which in your wrapper is triggering the code listed below
6. The slider is destroyed and re-created, thus calling it's onUpdate() again, which repeats the whole cycle

  componentDidUpdate() {
    if (this.props.disabled) this.sliderContainer.setAttribute('disabled', true);
    else this.sliderContainer.removeAttribute('disabled');
    this.slider.destroy();
    this.createSlider();
  }

Realistically, what you probably want to do is to replace componentDidUpdate() with componentWillReceiveProps() and check if there are changes that actually require re-creating the slider.
Additionally, seems like noUiSlider provides an API to update it's settings without destroying it - http://refreshless.com/nouislider/more/#section-update

In general, calling renders very often is normal React behavior, so you definitely do not want to to assign such heavy operations as re-creating something to a handler that could be called many times per second.

Edit: It would also help with #23 (comment)

[vvo]

I am not sure if we as react-nouislider need to take actions on the issues you are facing, if you feel like we need, then open a PR and explain it. Thanks!

[darkalor]

I am not sure if we as react-nouislider need to take actions on the issues you are facing

Allow me to disagree, your component pretty much guarantees a crash (with call stack exceeded) if it's passed any update handler, which works with the parent component's state (which is very common practice in react)

E.g. roughly like this, if you want a label showing the current value:

onUpdate(value) {
  this.setState({value: value});
}

render() {
  return(
    <div>
      <Slider onUpdate={this.onUpdate}/>
      <label>{this.state.value}</label>
    </div> 
  )
}

I'll consider opening a PR, since I'm working on resolving that issue anyway.

[vvo]

@darkalor To be clear when I said "I am not sure" I did not meant "I doubt you are saying the right things".

On this thread I am lost because you guys are far more comfortable with React than me. I will follow and read any of you valuable advice regarding how we need to update react-nouislider if that's the case.

Thanks!

[darkalor]

Sorry, have been busy the last week. I have the thing working, but just didn't get the time to make a proper clean PR

[darkalor]

Really not managing to deal with this for now.

Here's a gist (not properly cleaned up or anything) of what I'm using in my project, take a look if you can.
Note that I'm relying on lodash for working with arrays/objects.
https://gist.github.com/darkalor/12edbb03a347bf8b99b3135ae1daba5e

[vvo]

Sorry we are not maintaining this repository as much as we should. I recommend moving to https://github.com/airbnb/rheostat