Throttle

import { Throttle } from 'flowr';

Throttle will render it's children at most once in the specified time interval.

// ...
state = { count: 0 }

componentDidMount() {
  // start an interval that will increment state.count up to 9 and then stop.
  this.interval = setInterval(() => {
    if (this.state.count === 9) {
      return clearInterval(this.interval)
    }

    this.setState(state => ({
      count: state.count + 1
    }))
  }, 300)
}

render() {
  return (
    
      
        {this.state.count}
      
    
  )
}

In the above example Throttle will render the first state and after that the most recent update once every second. If no update occurred since the last render, throttling will be paused so we don't waste renders and when a new update comes, it will render that and start sampling again.


   { /* 0---------3---------6---------9 */ }

Props

Name	Type	Default	Description
time	number	-	The amount of time in ms that we need to throttle the render