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: 
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.
If you like Ronit's solution but want pure javascript

```
function timeout(delay) {
    return new Promise( res => setTimeout(res, delay) );
}
await timeout(1000);

```