Debounce

import { Debounce } from 'flowr';

Debounce will render it's children only after a certain amount of time has passed since the previous render.

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

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

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

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

In the above example, if skipFirst is true the span containing 5 will be rendered after 500ms have passed since the last state update. If skipFirst is false, the starting 0 will also be rendered.

Debounce becomes very useful when you want to prevent some actions or events from firing multiple times in a short timeframe. Here's an example of how you'd implement a debounced auto suggest input field using some of the components provided by Flowr:

onChange = (e) => {
  this.setState({
    suggestionsUrl: `https://exampleapi.com/suggestions?query=${e.target.value}`
  })
}

render() {
  const { suggestionsUrl } = this.state
  return (
    
      
      
         fetch(suggestionsUrl)}>
        {
          (err, res) => (
            
              
              { res.data.map(suggestion =>
                  {suggestion.label}) }
              
            
            )
          }
          
      
    
  )
}

Props

Name	Type	Default	Description
time	number	-	The amount of time in ms that we need to debounce the render for
immediate	bool	false	When set to `true` it will start debouncing as soon as it mounts, when `false` it will let the first render pass through