Question: I am new to React.js. I am not sure how to add `delay` to render in React.js. What is the best way to add delay.

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

```
setTimeout(function() {

}, 1000);

```

Answer: 
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 .
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
}

```