Source:  Twitter logo

I am new to Reactjs. I am not sure how to add delay to render in Reactjs.What is the best way to add delay.

I am adding the following code in render but its not working.

setTimeout(function() {

}, 1000);

Not sure why you would want to do this, but something like this?

The component's constructor:

constructor(props) {
    super(props);
    this.state = {
        render: false //Set render state to false
    }
}

On component mount:

componentDidMount() {
  setTimeout(function() { //Start the timer
      this.setState({render: true}) //After 1 second, set render to true
  }.bind(this), 1000)
}

The render method:

render() {
    let renderContainer = false //By default don't render anything
    if(this.state.render) { //If this.state.render == true, which is set to true by the timer.
        renderContainer = <div>Look at me! I'm content!</div> //Add dom elements
    }
    return (
      renderContainer //Render the dom elements, or, when this.state == false, nothing.
    )
  }

So when the timer fires, render is set to true. Because render is stored in state, this also triggers a re-render of the component. The if statement simply instructs renderContainer to not display anything unless the state render is true. You could also show a text indicating the component is loading, by instead of declaring renderContainer= false at the top, declaring the default as renderContainer=<div>Component is loading..</div> for example.

36 users liked answer #0dislike answer #036
Rob van Dijk profile pic
Rob van Dijk

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
26 users liked answer #1dislike answer #126
Ronit Roy profile pic
Ronit Roy

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(() => {
    const timeout = setTimeout(() => {
      setShow(true)
    }, 5000)

    return () => clearTimeout(timeout)

  }, [show])

  if (!show) return null

  return <>OK, Render</>
}

export default DeleayComponent
13 users liked answer #2dislike answer #213
Alan profile pic
Alan

The easiest way to display a component after a time is conditional rendering like this :

constructor(props) {
    super(props);
    this.state = {
        render: false 
    }
}
handleRender = () => {
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

render () {
   return (
          <div>
             <button onClick={handleRender}>Set render to true</button>
             { this.state.render ? <Component /> : null }
          </div>
   )
}

When you click the button after one second it will set the render state to true and the <Component /> will show up .

If you want to run setTimeout on component load and not clicking the button you can have it in componentDidMount lifecycle like this :

componentDidMount(){
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

Hope you fully understood how you can achieve this way of rendering components .

1 users liked answer #3dislike answer #31
Mahdi Faraji profile pic
Mahdi Faraji

One way to use hook with setTimeout is to set a property after the interval.

import { useState, useEffect } from "react";

const BotResponse = () => {

......

const [botMessage, setBotMessage] = useState('');

// function called from some user interaction
const botResponse = (msg) => {
   setTimeout(function() {
      setBotMessage(msg);
   }, 500);
};

useEffect(() => {
    console.log("bot msg... " + botMessage);

    // display the bot message

}, [botMessage]); // listening to a change on this property
}
0 users liked answer #4dislike answer #40
msanjay profile pic
msanjay

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).