CODEWITHSUNDEEP
javascriptreactjssliderreact-native
wdlax11
wdlax11

Reputation: 842

React JS Slider Lag

We are using a slider to filter by time. Currently when we load it up to a phone and use it there is so much lag and it appears that it's on the physical displaying of the time as you slide the slider across. Below is our code any ideas why this could possibly be happening? Do we need to update how we are calculating our value (we tried it as a stock value, set the state and still see the lag so we don't believe it's that). Currently we are trying to display 24 hours on this slider.

Thanks!

NOTES: We were reviewing the code and even took out the redundant this.setState({value: this.limitMarkers(value)} in the function call as well as the function itself. This didn't help :(. If anyone has any ideas please let us know!

 <Slider
   minimumTrackTintColor={'#FFCD00'}
   maximumTrackTintColor={'#e0e0e0'}
   thumbStyle={{color: '#FFCD00', backgroundColor: '#FFCD00'}}
   value={this.state.sliderValue}
   maximumValue={this.state.maximumValue}
   step={.5}
   onValueChange={(value) => this.setState({value: this.limitMarkers(value)}) }
   onSlidingComplete={ (value)=>{ SOME CODE }></Slider>

Limit Markers Function

limitMarkers(i){

    var decimals = Math.round((i - Math.floor(i))*59);
    i = Math.floor(i);
    var hours = currentHour+i;
    var time;

    if(hours > 12){
      if(hours > 24){
        if(hours > 36){
            hours = hours - 36;
            time = ' PM';
            labelIsTomorrow = true;
        }
        else{
          hours = hours - 24;
          time = ' AM';
          labelIsTomorrow = true;
        }
      }
      else{
        hours = hours - 12;
        time = ' PM'
        labelIsTomorrow = false;
      }
    }
    else {
      time = ' AM'
      labelIsTomorrow = false;
    }

    if(decimals < 10) decimals='0'+decimals;

    this.setState({
      label: hours+":"+(decimals),
      TOD: time
    });

    return hours;
  }

Upvotes: 2

Views: 2356

Answers (2)

Marcus Edwards
Marcus Edwards

Reputation: 11

I had this same problem and as I did some research into what can cause "lagginess" these are some pointers I came across:

  1. is the value update causing re-renders?

If the value update is causing re-renders of one or more components (who take the value as a prop) then this might be the issue.

Possible solution: Try to separate out the value from any props that would cause unnecessary renders. Possibly move external components into the parent if they share too much stateful data.

  1. Is the value update redundant or not time-sensitive?

Possible solution: Try React.useMemo in any components whose props contain the value, to cache any calculations you can.

Upvotes: 0

wdlax11
wdlax11

Reputation: 842

The code works, it was because we were running the app in debug mode. Once we put it on release mode and removed debug move the lag disappeared.

Upvotes: 1

Related Questions