React

by saravanabalagi

HTML

<div id="app"></div>

CSS

#app {
  font-size: 200px;
  margin: 50px;
}

React

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
  }
  
  updateProgress = (progress) => {this.setState({progress}); };
  
  myHeavyFunc = async (updateProgress) => {
  	let loopLength = 1000000;
    updateProgress(0);
  	for(let i=0; i<loopLength; i++) {
      await sleep(1);
    	updateProgress((i+1)/loopLength);
    }
  }
  
  render() {
  	let {progress} = this.state;
    return <h1 onClick={() => this.myHeavyFunc(this.updateProgress)}>{progress}</h1>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);