Re-rendering A Component

You would realize that calling ReactDom.render() is the initial of the rendering of a component and all sub components.

After the initial mounting of components, a re-rendering will occur when:

• A component’s setState() method is called.
• A component’s forceUpdate() method is called.

In the example below ReactDOM.render(< App / >, app); starts the first cascade of rendering, rendering <App /> and <Timer/>. The next re-render occurs when the setInterval() calls the setState() component method, which causes <App /> and <Timer/> to be re-rendered. Note the UI changes when the now state is changed.

See the Pen odmzaM by Bunlong (@Bunlong) on CodePen.

The next re-render occurs when the setTimeout() is invoked and this.forceUpdate() is called. Note that simply updating the state (i.e. this.state.now = 'foo';) does not cause a re-render. I set the state using this.state, and then I have to call this.forceUpdate() so the component will re-render with the new state.