React Native Put A "Cooldown" On A Button

my question is if it is possible to put a cooldown on a button that the user presses, or to only register like 1 press in 2 seconds. I am using React Native (Expo) connected with a

Solution 1:

Make the button disabled as soon as it's pressed.

const MyComponent = ({makePutCall}) => {
   const [disabled,setDisabled] = useState(false);

   const doPut = async () => {
       setDisabled(true);
       await makePutCall();
       setDisabled(false);
   }

   return <Button disabled={disabled} onPress={doPut}/>
 
}

or use a ref to prevent pushing more than once:

const MyComponent = ({makePutCall}) => {
   const disabled = useRef(false);

   const doPut = async () => {
       if(disabled.current) return;
       disabled.current = true;
       await makePutCall();
       disabled.current = false;
   }

   return <Button onPress={doPut}/>
 
}

My person favourite is a spinner, like you said:

const MyComponent = ({makePutCall}) => {
   const [showSpinner,setShowSpinner] = useState(false);

   const handlePress = async () => {
      setShowSpinner(true);
      await makePutCall();
      setShowSpinner(false);
   }

   return showSpinner ? <Spinner/> : <Button onPress={handlePress}/>
}

or do it another way - DON'T USE A TIMER.

Solution 2:

There are 2 solutions I can think of as of now, there might be many other solution as well.

Solution 1: Have some variable which can keep a value if database call has already been done, once you get response from database you can reset that variable and user can press that button again.

Something like

onPress = {this.state.isPressed ? null : <this.writeTodatabase>}

and

writeTodatabase = () => {
    this.setState({ isPressed:true })
    // code to write to database
    // once you have response from database you can set isPressed to false.
}

You can also disable button if that variable is true.

Solution 2: You can use throttle from lodash library.

Reference Document

Solution 3:

try using debounce/throttle. here is a basic example of debounce.

Import * as _ from lodash;
...
...

      
onPressDebounced = _.debounce(this.onPressed(),500);

render() { 
  return ( 
    <TouchableHighlight 
      { ...this.props } 
      onPress = { this.onPressDebounced}> 
      {this.props.children} 
    </TouchableHighlight>
  )
}