close

How to add delay in Reactjs

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to add delay in Reactjs in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to add delay in Reactjs ?

  1. How to add delay in Reactjs ?

    to add delay in Reactjs function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
    } await timeout(1000); //for 1 sec delay

  2. How to add delay in Reactjs ?

    to add delay in Reactjs function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
    } await timeout(1000); //for 1 sec delay

Method 1

Pure typescript Solution

You would be able to create delay function with async

function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
}

and then call the function

await timeout(1000); //for 1 sec delay

Method 2

With React hooks. It will wait 5s and then render this component.

import React from 'react'

const DeleayComponent = () => {
  const [show, setShow] = React.useState(false)

  React.useEffect(() => {
    setTimeout(() => {
      setShow(true)
    }, 5000)
  }, [show])

  if (!show) return null

  return <>OK, Render</>
}

export default DeleayComponent

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment