Timers in React Native Introduction

Exploring the Timers in React Native

Timers are a crucial section of an application. React Native implements the browser Timers.

A JavaScript code block is normally accomplished synchronously. But there are some JavaScript native functions (Timers) that allow us to delay the execution.

There are four categories of React Native Timers:

1. Delay
2. Repeat
3. Immediate
4. Animation Schedule

Now, let’s dive into the different Timers regarding React Native and Mozilla official documentation.

DELAY

• setTimeout()

Calling the function or executing the code block after the stated delay.

var timeoutID = setTimeout(function, delay in milliseconds)
// The below code displays the alert dialog after two seconds.
var timeoutId = setTimeout(
    () => { alert(‘After two seconds’)}
, 2000);

• clearTimeout()

Removing the delay, set by setTimeout().

clearTimeout(timeoutID)

timeoutID: The ID is returned by calling the setTimeout

// The below code removes the delay for < timeoutId >.
clearTimeout(timeoutId)

REPEAT

• setInterval()

Calling the function or executing the code block repeatedly, with a fixed time delay between each call.

var intervalID = setInterval(function, delay in milliseconds);
// The following code shows an alert dialog every three seconds.
var intervalId = setInterval(
     () => { alert('Every three second')}
, 3000);

• clearInterval()

Canceling the repeated action that was created by setInterval().

clearInterval(intervalID);
// The following code removes the repeat for < intervalId >.
clearInterval(intervalId);

IMMEDIATE

• setImmediate()

Calling the function or execution as soon as possible.

var immediateID = setImmediate(function);
// The below code displays the alert dialogue immediately.
var immediateId = setImmediate(
     () => {    alert('Immediate Alert');
}

• clearImmediate()

Canceling the immediate actions that were set by setImmediate().

clearImmediate(immediateID);
// The below code removes the < immediateId >
clearImmediate(immediateId);

ANIMATION SCHEDULE

• requestAnimationFrame()

It is the standard way to perform animations.

Calling a function to update an animation before the next animation frame.

var requestID = requestAnimationFrame(function);
// The following code perform the animation.
var requestId = requestAnimationFrame(
     () => { 
          // animate something
     }
)

• cancelAnimationFrame()

Canceling the function that was set by requestAnimationFrame().

cancelAnimationFrame(requesetID);
// The following code removes the <requestId>
cancelAnimationFrame(requestId);

Happy coding. 👩‍💻👨‍💻

Please let me know in the comments if I missed any part.