How to Clearinterval Before Starting It Up Again

Introduction

Using setInterval lets you execute a role at specific intervals. It's often very useful in React apps, for example for checking a condition regularly or fetching data every and so often.

The lawmaking

Allow'southward get straight to the code. This is how y'all use setInterval in a functional React component:

          · · ·            useEffect            (            (            )            =>            {            const            interval            =            setInterval            (            (            )            =>            {            console            .            log            (            'This will be called every 2 seconds'            )            ;            }            ,            2000            )            ;            return            (            )            =>            clearInterval            (interval)            ;            }            ,            [            ]            )            ;            · · ·                  

Read the rest of the article if yous want the caption of what's happening in a higher place!

How the setInterval code is working

At that place'southward three things to unpack:

1. Why is setInterval chosen inside a useEffect hook?
2. Why does the setInterval call look like that?
3. Why are we returning something from the useEffect hook?

Why is setInterval called inside a useEffect hook?

According to the React docs, "The Event Hook lets you perform side furnishings in office components". And that's exactly what we want to do here.

You could ask what would happen if we declared it in the component itself. Let's see that with the nigh famous of examples, a counter!

Let's say nosotros want a counter that starts out at 0, and goes up by 1 every second. Something similar that:

The fashion to implement this counter using the code in the kickoff of the article is the following:

                      import                          {              useState,              useEffect              }                        from            'react'            ;            consign            default            function                          ExampleCounter                        (            )            {            const            [counter,            setCounter]            =            useState            (            0            )            ;            useEffect            (            (            )            =>            {            const            interval            =            setInterval            (            (            )            =>            {            setCounter            (            (            prevCounter            )            =>            prevCounter            +            1            )            ;            }            ,            m            )            ;            return            (            )            =>            clearInterval            (interval)            ;            }            ,            [            ]            )            ;            render            (                                          <div              className                              =                "App"                            >                                                                              <h1              >                        Counter:                        {counter}                                          </h1              >                                                                              </div              >                        )            ;            }                  

A pretty straightforward functional component that holds a state in counter. The country is incremented every 2nd cheers to the setInterval defined in the useEffect. Great.

Now what happens if I get rid of the useEffect entirely?

                      import                          {              useState              }                        from            'react'            ;            export            default            function                          ExampleCounter                        (            )            {            const            [counter,            setCounter]            =            useState            (            0            )            ;            setInterval            (            (            )            =>            {            setCounter            (            (            prevCounter            )            =>            prevCounter            +            1            )            ;            }            ,            1000            )            ;            return            (                                          <div              className                              =                "App"                            >                                                                              <h1              >                        Counter:                        {counter}                                          </h1              >                                                                              </div              >                        )            ;            }                  

Well, this happens:

That'southward a crazy counter all correct! Tin y'all guess what happened?

As the setInterval is defined directly inside the function Component, it gets called every time the component renders! And when does the component render? On every country change! And when does the land alter? When the interval callback is called.

Oops.

And so yeah, put your side effects in useEffect hooks if you don't want to take them called every time the component renders!

Why does the setInterval telephone call expect like that?

This one is pretty easy: it'due south simply using the web API of setInterval. In that location'southward a number of functions defined for you in the spider web, that you lot can directly use. setInterval is i of them.

Simply look information technology up on Google, and you'll become an example of how to employ information technology pretty fast!

The function takes two arguments:

1. The first is a function that volition get called at specified intervals.
2. The second is the interval, in milliseconds.

Why are we returning something from the useEffect hook?

As a reminder, when nosotros want to do some deportment when a component is destroyed, we define it in a part which is returned in a useEffect.

A very common use case of this is clearing up furnishings similar intervals.

Why do we need to articulate intervals? Well, imagine we don't clear information technology. The component is destroyed, but the interval nonetheless runs! And it'due south trying to set a state that doesn't be anymore.

This isn't as well big of a bargain by itself (React will just ignore information technology), but it's withal a memory leak. At present imagine the component is created and destroyed again and again. You could get dozens of setIntervals running! Taken together, this could seriously slow down your app.

That's why the web API that gives usa setInterval also provides united states with a clearInterval function. And that'due south why you call it in the render statement of useEffect!

Wrapping upwards

I hope yous take a better idea of how to use setInterval in React! It'southward a very useful tool to take in your box, but tin lead to bugs when not used properly.

If you lot yet have some questions or things that aren't clear, please feel gratis to reach out on Twitter!

mortondard1976.blogspot.com

Source: https://devtrium.com/posts/set-interval-react

Share this post