React Js setInterval Method | SetTimeOut

React Js setInterval Method: The setInterval method in ReactJS is a built-in JavaScript function that allows developers to execute a specific code repeatedly at a defined interval. It takes two arguments: a callback function and a time interval in milliseconds. The callback function is executed every time the interval elapses until the clearInterval method is called. Developers commonly use setInterval to perform periodic updates, and animations, or to fetch new data from an API.

written

reviewed

updated

What is the purpose of the React Js `setInterval()` method?

This is a code snippet written in JavaScript using the React library. Here's an explanation of what the code does:

The first line imports three React hooks: useState, useEffect, and useRef.
The App function is defined. It initializes a state variable message using the useState hook. The initial value of message is an empty string.
The useEffect hook is used to run a side effect in the form of a function that updates the message state every 5 seconds. The setInterval function is used to call this function every 5 seconds. The useEffect hook returns a function that clears the interval when the component unmounts.
The return statement of the App function returns a JSX expression that renders a div with an id of app. Inside this div, there are two p elements, one with the static text "Use of setInterval in React Js" and another with the value of the message state variable, which gets updated every 5 seconds.
Finally, the ReactDOM.render the method is used to render the App component to the HTML element with the id of app on the page.

React Js setInterval Method Example

    <script type="text/babel">
        const { useState, useEffect, useRef } = React;

        function App() {
            const [message, setMessage] = useState("");

            useEffect(() => {
                const interval = setInterval(() => {
                    setMessage(new Date().toLocaleTimeString());
                }, 1000);

                return () => clearInterval(interval);
            }, []);

            return (
                <div id="app">
                    <h3>React Js setInterval Method</h3>
                    <p>Use of setTimeout in React Js</p>
                    <p>{message}</p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js setInterval Method

In React JS, what is the process for stopping an interval?

This code is written in JSX, which is a syntax extension of JavaScript that allows you to write HTML-like code in JavaScript. The code is using React, a JavaScript library for building user interfaces.

The useState, useEffect, and useRef hooks are imported from the React library.
The App function is defined. It uses the useState hook to create a state variable message and a function to update it called setMessage. It also uses the useRef hook to create a reference to the interval ID, which will be used to stop the interval later.
The useEffect hook is used to set up the interval that updates the message state variable with the current time every 2 seconds. The hook returns a function that clears the interval when the component unmounts.
The return statement contains the JSX that renders the component to the DOM. It includes a header, some text, and a paragraph that displays the current time stored in the message state variable. It also includes a button that, when clicked, stops the interval by calling the clearInterval function with the interval ID stored in the intervalIdRef reference.
Finally, the ReactDOM.render function is called to render the App component to an HTML element with the ID of "app" in the DOM.

React Js clearInterval Method Example

    <script type="text/babel">
        const { useState, useEffect, useRef } = React;

        function App() {
            const [message, setMessage] = useState("");
            const intervalIdRef = useRef(null);

            useEffect(() => {
                intervalIdRef.current = setInterval(() => {
                    setMessage(new Date().toLocaleTimeString());
                }, 1000);
                return () => clearInterval(intervalIdRef.current);
            }, []);

            return (
                <div class='container'>
                    <h3>React clearInterval Method | Stop interval</h3>
                    <p>{message}</p>
                    <button onClick={() => clearInterval(intervalIdRef.current)}>
                        Stop
                    </button>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of above example

React JS Tutorial