How to Use Times to Run a Function Again and Again

At times, you may want to execute a function at a certain time later or at a specified interval. This phenomenon is called, scheduling a role telephone call.

JavaScript provides two methods for it,

• setInterval
• setTimeout

Using these scheduling methods with reactJs is straightforward. Withal, we need to exist enlightened of a few small gotchas to use them effectively. In this article, we will explore the usages of setInterval and setTimeout methods with reactJS components.

Allow us build a simple Real-time Counter and Task Scheduler to demonstrate the usages.

What is setInterval?

The setInterval method allows us to run a function periodically. Information technology starts running the function later on an interval of time and then repeats continuously at that interval.

Hither we take divers an interval of 1 second(1000 milliseconds) to run a role that prints some logs in the browser panel.

                      const            timerId =            setInterval(() =>            {            console.log('Someone Scheduled me to run every 2d'); },            1000);                  

The setInterval function call returns a timerId which can exist used to cancel the timer by using the clearInterval method. It will stop whatsoever further calls of setInterval.

                      clearInterval(timerId).                  

What is setTimeout?

The setTimeout method allows us to run a function in one case subsequently the interval of the time. Hither we have defined a role to log something in the browser panel after 2 seconds.

                      const            timerId =            setTimeout(() =>            {            console.log('Will be called after 2 seconds'); },            2000);                  

Similar setInterval, setTimeout method phone call besides returns a timerId. This id can exist used to terminate the timer.

                      clearTimeout(timerId);                  

Real-time Counter

Permit us build a real-time counter app to empathize the usage of the setInterval method in a react awarding. The real-time counter has a toggle push to showtime and stop the counter. The counter value increments by 1 at the end of every second when the user starts the counter. The user will be able to stop the counter or resume the counter from the initial value, zero.

We volition be using some of the built-in hooks from react just the aforementioned is possible using the React Course component as well.

This is how the component behaves,

Effigy ane: Using setInterval and React Hooks

Stride ane: Let'southward become started by importing React and two in-built hooks, useState and useEffect.

                      import            React, { useState, useEffect}            from            "react";                  

Step 2: We will demand two land variables. First to keep rail of the start-stop toggle of the real-fourth dimension push button and 2nd, for the counter itself. Allow's initialize them using the useState hook.

The hook useState returns a pair. First is the current state and 2d is an updater function. We normally take advantage of array destructuring to assign the values. The initial land value can exist passed using the argument.

                      const            [realTime, setRealTime] = useState(false);            const            [counter, setCounter] = useState(0);                  

Stride 3: The hook useEffect is used for handling whatsoever sort of side effects like land value changes, any kind of subscriptions, network requests, etc. It takes two arguments, showtime a part that will be invoked on the run and, an array of the values that volition run the hook.

It runs by default later on every render completes. However, nosotros can make information technology run whenever a particular value changes by passing it equally the second parameter. We tin can as well brand it run merely once by passing an empty array every bit the second parameter.

In this case, we are interested to run the useEffect hook when the user toggles the real-time button(for start and cease). We desire to first the interval when the realTime state variable is true and cancel/cease the interval when the state variable value is fake. Here is how the code structure may look similar,

          useEffect(() =>            {            let            interval;            if            (realTime) {     interval =            setInterval(() =>            {            console.log('In setInterval');            // The logic of changing counter value to come before long.            },            1000);   }            else            {            clearInterval(interval);   }            return            () =>            clearInterval(interval); }, [realTime]);                  

Nosotros have used the setInterval method inside the useEffect Hook, which is the equivalent of the componentDidMount lifecycle method in Class components. At this point, it but prints a log at the end of a one-second interval. We are clearing the timer in two cases. Starting time, when the value of the realTime state variable is simulated, and second, the component is unmounted.

Step 4: Time to increment the counter. The well-nigh straightforward way to do that will be, phone call the setCounter method and set the incremented value of the counter like this,

          setCounter(              counter              =>            counter +            1);                  

But allow united states of america exist enlightened of 1 of import thing here. setInterval method is a closure, so, when setInterval is scheduled it uses the value of the counter at that exact moment in fourth dimension, which is the initial value of 0. This will make us feel, the country from the useState hook is not getting updated inside the setInterval method.

Have a expect into this lawmaking,

          useEffect(() =>            {            let            interval;            if            (realTime) {     interval =            setInterval(() =>            {            console.log('In setInterval', counter);     },            1000);     setCounter(100);   }            else            {            clearInterval(interval);   }            return            () =>            clearInterval(interval); }, [realTime]);                  

The console.log('In setInterval', counter); line will log 0 fifty-fifty when we take set up the counter value to 100. Nosotros demand something special here that can keep track of the changed value of the state variable without re-rendering the component. Nosotros have another claw for it called, useRef for this purpose.

useRef is similar a "box" or "container" that tin can concur a mutable value in its .current holding. We can mutate the ref directly using counter.current = 100. Check out this awesome article by Bhanu Teja Pachipulusu to larn near the useRef hook in more detail.

Alright, so nosotros demand to starting time import it along with the other hooks.

                      import            React, { useState, useEffect, useRef }            from            "react";                  

And so, use the useRef hook to mutate the ref and create a sync,

                      const            countRef = useRef(counter); countRef.current = counter;                  

After this, use the countRef.current value instead of the counter land value inside the function passed to the setInterval method.

          useEffect(() =>            {            let            interval;            if            (realTime) {     interval =            setInterval(() =>            {            allow            currCount = countRef.current;       setCounter(              currCount              =>            currCount +            one);     },            thou);   }            else            {            clearInterval(interval);   }            return            () =>            clearInterval(interval); }, [realTime]);                  

Now we are guaranteed to go the updated(current) value of the counter all the time.

Pace 5: Adjacent step is to create 2 functions for toggling the start-end push and resetting the counter.

                      const            manageRealTime =            () =>            {   setRealTime(!realTime); }            const            reset =            () =>            {   setCounter(0); }                  

Step vi: The concluding step is to create the rendering part of it.

                      <div              className={manner.btnGrpSpacing}>            <Button              className={style.btnSpacing}              variant={realTime?              'danger'              :              'success'}              onClick={()              =>            manageRealTime()}>       {realTime ? 'Finish Real-Time': 'Outset Real-Time'}            </Push button>            <Push button              className={style.btnSpacing}              variant=              'info'              onClick={()              =>            reset()}>       Reset Counter            </Button>            </div>            <div              className={way.radial}>            <span>{counter}</span>            </div>                  

That's all. We have the existent-time component working using setInterval and react hooks(useState, useEffect and useRef).

Task Scheduler

Now we will exist creating another react component chosen, Task Scheduler which will schedule a task of incrementing a counter by one afterward every ii seconds. This scheduler will non do annihilation until the user clicks on a button to schedule again or reset the counter.

This is how the component behaves,

Figure i: Using setTimeout and React Hooks

Just like the setInterval method, we will use the setTimeout method within the useEffect hook. Nosotros will as well clear the timer when the component unmount.

          useEffect(() =>            {            const            timer =            setTimeout(() =>            {            console.log('setTimeout called!');   },            1000);            render            () =>            clearTimeout(timer); }, []);                  

Like setInterval, setTimeout is also a closure. Therefore, we will confront a similar situation that the state variable counter may non reflect the current value inside the setTimeout method.

          useEffect(() =>            {            const            timer =            setTimeout(() =>            {            console.log(counter);   },            2000);   setCounter(100);            return            () =>            clearTimeout(timer); }, []);                  

In the in a higher place case, the counter value volition remain 0 even when we have gear up the value to 100.

Nosotros can solve this problem similar to how we accept seen it in the previous example. Use the hook useRef.

          useEffect(() =>            {            const            timerId = schedule();            render            () =>            clearTimeout(timerId); }, []);            const            schedule =            () =>            {   setScheduleMessage('Scheduled in 2s...');            const            timerId =            setTimeout(() =>            {            let            currCount = countRef.electric current;       setCounter(              currCount              =>            currCount +            1);            console.log(counter);   },            2000);            return            timerId; }                  

Hither we are passing the role schedule to the setTimeout method. The schedule function makes apply of the electric current value from the reference(ref) and sets the counter value accordingly.

Demo and Code

You tin play effectually with both the components from hither: Demo: JavaScript scheduling with React Hooks

All the source lawmaking used in this article is part of the DemoLab GitRepo. Delight experience gratis to clone/fork/utilize.

In Summary

To summarize,

• setInterval and setTimeout are the methods available in JavaScript to schedule office calls. Read more about it from here.
• There are clearInterval and clearTimeout methods to cancel the timers of the scheduler methods.
• Nosotros tin can apply these scheduler methods as similar to any other JavaScript functions in a react component.
• setInterval and setTimeout methods are a closure. Hence when scheduled, it uses the value of the state variable at the time it was scheduled. When the component re-renders a new closure is created but that doesn't alter the value that was initially airtight over. To prepare this state of affairs, we use the useRef claw to get the electric current value of the state variable. You tin read further well-nigh this solution from this GitHub issue.

Hope yous institute this article helpful. You may also like,

• Agreement JavaScript Closure with instance
• A Notification Timeline using React
• Understanding Dynamic imports, Lazy and Suspense using React Hooks
• Adding a Table row dynamically using React Hook
• Beingness Reactive - Usage of Virtual DOM and DOM Diffing
• Footstep by Step Guide: Alloy Redux with ReactJs

---

You lot can @ me on Twitter (@tapasadhikary) with comments, or feel free to follow.

If it was useful to you, please Like/Share and then that, it reaches others equally well. Please hitting the Subscribe push button at the top of the page to go an email notification on my latest posts.

neffablut1993.blogspot.com

Source: https://blog.greenroots.info/how-to-use-javascript-scheduling-methods-with-react-hooks

Share this post