Delay

import { Delay } from 'flowr';

Delay will render it's children only after a certain amount of time has passed.

// ...

  
    {this.state.count}

In the above example if showFirst is true the first render will be displayed:

and after 2 seconds, it renders the last state updates, skipping the ones inbetween:

Delay 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