Settimeout in React Native

React-Native setTimeout function triggered after clearTimeout is called

When your component changes the state and rerender, a new timeout instance recreates and results in unexpected behavior.

The solution is to keep track of the original timeout instance for each component rerender cycle.

React provide useRef hook to persist value for each component render cycle.

let timerRef = React.useRef(null);

useEffect(() => {
  // Clear the interval when the component unmounts
  return () => clearTimeout(timerRef.current);
}, []);

const handleControlsInteraction = () => {

  if (timerRef.current != null) {
    clearTimout(timerRef.current)
  }

  // now we set a new timer for 1 second
  timerRef.current = setTimeout(() => {
    setDisplayButtons(false);
  }, 1000);
};

Using SetTimeout() in React

it's silly me. my last if statement was wrong. it should be as follows.

if (response.ok) {
    setSend(true);
    setTimeout(() => {
      setSend(false);
    }, 3000);
  }

setTimeout and clearTimeout in React

You could do something like this. So, you run the timer and every time you clicking somewhere in the document it will cancel the current timer and run the new. So your myFunc function will run only if user doesn't click on the page after N seconds.

Keep in mind, you want to do it in 30 sec you will need to put 30000 in setTimeout

const timerId = useRef(null)

  const myFunc = () => {
    clearTimeout(timerId.current)
    timerId.current = null
    console.log('DO SOMETHING')
  }

  const onDocumentClick = () => {
    if (timerId.current) {
      clearTimeout(timerId.current)
      timerId.current = window.setTimeout(myFunc, 3000)
    }
  }

  useEffect(() => {
    timerId.current = window.setTimeout(myFunc, 3000)

    document.addEventListener('click', onDocumentClick)
    return () => {
      clearTimeout(timerId.current)
      document.removeEventListener('click', onDocumentClick)
    }
  }, [])

How to delay react-navigation action with setTimeout?

Separate the functions. There's no need to utilise the action.

const goToCourse = (courseId) => {

    const NaviOne = NavigationActions.navigate({
        routeName: 'CourseTab'
    })

    const NaviTwo = NavigationActions.navigate({
        routeName: "CourseItem"
    })

    props.navigation.dispatch(NaviOne)
    setTimeout(() => { props.navigation.dispatch(NaviTwo) }, 1000)

}

React JS setTimeout gets executed multiple times

I would agree with the debounce solution, but also if you didn't know it, this code might be even simpler for you, so each time a component rerenders, the timer is set with 0 again, so in order to persist the value, imagine you need to put it in a state, just like this:

import { useState } from "react";

function SearchField() {
  const [city, setCity] = useState("New York");
  const [timer, setTimer] = useState(0);

  const handleFetchWeather = async () => {
    const data = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${WEATHER_API_KEY}&units=metric`
    );
    console.log(data);
  };

  const handleSetCity = (e) => {
    if (timer) {
      clearTimeout(timer);
    }
    setCity(e.target.value);
    setTimer(
      setTimeout(() => {
        console.log(city);
        // handleFetchWeather()
      }, 2000)
    );
  };

  return (
    <div className="search">
      <input
        type="text"
        placeholder="Search city..."
        onChange={handleSetCity}
      />
    </div>
  );
}

export default SearchField;

Now, every rerender, the component will remember the previous value of it ;)

(TypeScript, react native) setTimeout in combination with onPressIn and onPressOut

The Button component requires a onPress method. This could be doing nothing. Compare the following code snippet to make this more explicit. Providing no onPress is equivalent with passing undefined.

<Button onPress={undefined} onPressIn={() => addTimer(accionMas)} onPressOut={eraseTimer} title={"Titlte"} />

This yields the error message Please attach a method to this component.

You can fix this as follows.

<Button onPress={() => {}} onPressIn={() => addTimer(accionMas)} onPressOut={eraseTimer} title={"Titlte"} />

We just provide the function () => {} which does nothing. The message does no longer occur.

---

Related Topics