Timers are very commonly used in React for all sorts of applications. They allow you to manipulate the order in which events occur.

From the React Native Timer documentation, there are four types of timers:

  • Timeout (delay)
  • Interval (repeat with interval)
  • Immediate (call as soon as possible)
  • Animation (call when the browser is ready to render frame)

In this article, we will go over all four-timer types, and their methods, in detail.

Why the React Native Timer?

The React Native Timer is actually an implementation of the vanilla JavaScript timer, sharing the same methods.

Usually, code runs synchronously, or one line at a time, where a line only executes when the previous line has already been completed. However, it’s often much better to run code asynchronously, or based on conditions rather than a predefined order.

With the React Native Timer, we can run blocks of code asynchronously in set time periods.

Take a look at the code below, which uses the setTimeout() method to run asynchronously.

function TimerComponent() { setTimeout(() => { console.log("2 sec.") }, 2000); setTimeout(() => { console.log("1 sec.") }, 1000); console.log("no timer.") return ( <div> Hello World </div> ) } export { TimerComponent }

When the above code is run, this output is generated in the console:

As you can see, the output is generated in the opposite order of what would happen in ordinary synchronous code.

Why are “1 sec.” and “2 sec.” each run twice? Glad you asked.

Using ‘useEffect’ with React Native Timer

React is often run in Strict Mode, which alters React’s development mode (what you’d usually run in your browser). One of the changes this brings is that your code will be run twice to better highlight potential errors.

Usually, ‘console.log()’ is suppressed from running twice, but since in this case we are running it within a ‘setTimeout()’, the React compiler fails to suppress the second execution.

To avoid this bug, we use ‘useEffect’. Any code run with ‘useEffect’ is only executed once when the React component is being rendered to the screen:

import { useEffect } from 'react' function TimerComponent() { setTimeout(() => { console.log("2 sec.") }, 2000); useEffect(() => { setTimeout(() => { console.log('1 sec.'); }, 1000); return () => { clearTimeout(timer); } }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

Output in the console:

As you can see, “1 sec.”, which was run within ‘useEffect()’, was only printed to the console once, whereas “2 sec.”, which was run normally within React Strict Mode, was printed twice.

Now that we’ve gotten that out of the way, we will go through all the React Timer functions.

Difference Between setTimeout vs clearTimeout

‘setTimeout()’ sets a block of code to run on a delay, while ‘clearTimeout()’ removes the task, preventing it from running at all. We’ll see this in action:

import { useEffect } from 'react' function TimerComponent() { useEffect(() => { setTimeout(() => { console.log("2 sec.") }, 2000); var oneSec = setTimeout(() => { console.log('1 sec.'); }, 1000); clearTimeout(oneSec) }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

When run, the code produces the following output in the console :

While “1 sec.” was originally supposed to print before “2 sec.”, ‘clearTimeout()’ made it not print at all.

Note that we set the variable ‘oneSec’. ‘setTimeout()’ returns the ID needed in order to be able to reference the timeout later in ‘clearTimeout()’.

Using setInterval and clearInterval

‘setInterval()’ and ‘clearInterval()’ are similar to ‘setTimeout()’ and ‘clearTimeout()’, but the difference is that they run multiple times.

“Interval” means that the code is run over and over again with a predefined time period between each execution. We’ll see an example below.

Read the full write-up on how to use setInterval.

import { useEffect } from 'react' function TimerComponent() { useEffect(() => { setTimeout(() => { console.log("2 sec.") }, 2000); setInterval(() => { console.log('1 sec.'); }, 1000); }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

After running for a bit, the code produces the following output in the console:

As you can see, ‘setInterval()’ operates like ‘setTimeout()’ but with a forever repeating loop around it. This means that the function specified to execute can run indefinitely.

What if we want to get rid of the interval execution after a certain number of executions? That’s where ‘clearInterval()’ comes in:

import { useEffect } from 'react' function TimerComponent() { useEffect(() => { var counter = 0; var oneSecInterval = setInterval(() => { console.log('1 sec.'); counter ++; if (counter >= 5) { clearInterval(oneSecInterval); } }, 1000); }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

When the counter reaches 5, ‘clearInterval()’ is called, removing the interval from the program. Thus, the output of this code in the console is:

After five executions, the interval is terminated.

setImmediate and clearImmediate

‘setImmediate()’ runs code asynchronously as soon as possible. This means that the specified code will run immediately on the next iteration of the event loop (after the browser has handled events and display updates).

‘setImmediate()’ is best shown with an example:

import { useEffect } from 'react' function TimerComponent() { useEffect(() => { console.log("1"); setImmediate(() => { console.log('Immediate.'); }); console.log("2"); }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

Outputs in the console:

In the example above, ‘setImmediate’ runs immediately after “1” and “2” are logged to the console. We can think of ‘setImmediate’ as being very similar to ‘setTimeout’ where the delay amount is 0.

As always, ‘setImmediate’ has its corresponding clearing function, ‘clearImmediate’:

import { useEffect } from 'react' function TimerComponent() { useEffect(() => { console.log("1"); var immediate = setImmediate(() => { console.log('Immediate.'); }); clearImmediate(immediate); console.log("2"); }, []); return ( <div> Hello World </div> ) } export { TimerComponent }

Outputs in the console:

`

requestAnimationFrame() and clearAnimationFrame()

‘requestAnimationFrame()’ is used to fire a function only after all frames have been flushed, and before the next animation sequence begins. This is useful, for example, when you are updating values in between frames.

For example, when constantly updating an object:

import { useState } from 'react' function TimerComponent() { const [number, setNumber] = useState(0); var increment = function () { setNumber(number+1); requestAnimationFrame(increment); }; requestAnimationFrame(increment); return ( <div> {number} </div> ) } export { TimerComponent }

In the code example above, we constantly increase ‘number’ through ‘setNumber’, which is created by ‘useState()’. To do so, we use a recursive loop.

‘requestAnimationFrame(increment)’ first gets the recursive loop going, calling the ‘increment’ function in between rendering frames. The function ‘increment’ then calls itself over and over again, continuously increasing ‘number’.

The magic is in the ‘requestAnimationFrame()’. The function ensures that the update of ‘number’ happens in between renders of the screen.

This is extremely important because it ensures that the incrementing of ‘number’ is done as expected, instead of happening randomly. Without ‘requestAnimationFrame()’, ‘number’ is likely to be incremented while the frame is re-rendering itself, causing inconsistencies.

‘clearAnimationFrame()’ works as we expect:

import { useState } from 'react' function TimerComponent() { const [number, setNumber] = useState(0); var increment = function () { setNumber(number+1); var animationUpdate = requestAnimationFrame(increment); if (number > 500) { clearAnimationFrame(animationUpdate) } }; requestAnimationFrame(increment); return ( <div> {number} </div> ) } export { TimerComponent }

In the example above, the ‘requestAnimationFrame()’ is cleared after number has been incremented above 500.

Thank you for following through this article, and I hope you now know how to use the React Native Timer!

👋 Hey, I'm Jesse Ryan Shue
I am a Full-Stack Developer and an Industrial/Mechanical Designer. I have work experience in Industrial Design, 3D printing, and teaching. I am experienced in Python, JavaScript, and SolidWorks CAD. Follow me on LinkedIn

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.