How To Create A Delay Function In React

This article will show you how to create a Delay function in React. Some recommended methods like using setTimeout() method, Use the async, await method. Let’s follow the article below to understand more about how to do it.

What is Debounce?

Debounce is a method or technique that helps us improve performance. When using Debounce, we will reduce the times the application has to handle continuous events.

Debounce function forces a function to wait a certain amount of time before being re-run. Functions are built to limit the number of times a function is called.

Debounce creates a function closed over the timeout variable. The timeout variable can be accessed in each invocation of the created function even after it debounces and is returned, and it can change across different invocations.

It starts with no timeout.

If the constructor is called, then clear and reset the timeout. If the timeout is reached, then call the original function to execute.

How to create a Delay function in React

Use setTimeout() method

The setTimeout() function is used to set a certain amount of time to perform a particular task. The function only executes once when we set the execution time and how much delay.

Syntax:

setTimeout(function, time)

Parameters:

• function: The content to be done. This is a function.
• time: How much time (In milliseconds) will the function execute.

In this way, we will use setTimeout to create a delay for the function in React and follow the code below to see how it works.

Code:

function App() {
    function handleClick() {
        setTimeout(() => {
          	alert("Wellcome to LearnShareIT!");
        }, 2000);
    }

    return (
        <div>
          	<button onClick={handleClick}>Send message</button>
        </div>
    );
}

export default App;

After compiling on the screen, there will be a button to send a message. When we click this button, it will run the setTimeout() method which will delay 2 seconds and then run the alert() function.

Use the async, await method

In this way, we will use the asynchronous function by using async, await combined with a timeout function to be able to delay the function we use. When we press the send message button, the program will wait a few seconds before alerting the screen.

Code:

import { useEffect } from "react";
 
const timeout = (second) => new Promise((callback) => setTimeout(callback, second));
 
const App = () => {
    const handleClick = async () => {
        await timeout(1000);
        alert("Welcome to LearnShareIT");
    };
  
    return (
        <div>
          	<button onClick={handleClick}>Send Message</button>
        </div>
    );
};
 
export default App;

Just like the above method, the return results of the two methods are the same. Hope it helps you.

Summary

To summarize, this article has shown you how to create a Delay function in React. You can do it by using setTimeout() method or async, await.  Let’s try them to get your desired results. Thanks for reading!

Maybe you are interested:

• How to set Text color in React
• How to Listen for State changes in React
• How to Prevent form submission in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs