Q:

Images only render when delay 1 second then setState

I got a problem when trying to load image async and render it and I need to set a delay for 100ms to setState anything to make image rendered but it only work with small amount of image but with much more images it needs much more than 100ms. Anyone have a solution for it. Thanks so much 
this.props.callApi('GET', '/api/folders/' + child.id + '/files', null, this.props.token, (data) => {
                    console.log(data)
                    data.data.content.forEach(ele => {
                        fetch("/api/files/" + ele.id + "/blob")
                            .then((res) => res.blob())
                            .then((res) => {
                                childFolder.uploadFile.push(URL.createObjectURL(res));
                            });
                    })
                    arr.push(childFolder);
                    this.setState({uploadedLink: arr}, () => {
                        // this.setState(this.state)
                        // this.render();
                        // NEED TO SET DELAY TO IMAGE RENDERED
                        _.delay(() => this.setState({loading: false}), 100);
                    });

                })

A:

Use the onLoad prop of image tag to handle the loaded state:
...
handleImgLoaded = () => {
   this.setState({ loading: false })
}

render(){
  const { uploadedLink } = this.state;

  return (
    <img src={uploadedLink} onLoad={this.handleImgLoaded} />
  )
)

