Re-rendering A Component

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

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

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

Anytime a component is re-rendered (or initially rendered) all of its children components are rendered inside of the virtual DOM possibly causing a change to the real DOM (i.e., the UI). The distinction I am making here is that just because a component is re-rendered in the virtual DOM, it does not always follow that an update to the DOM will occur.

In the code 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.

source code

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.

NEVER UPDATE THE STATE USING this.state., DID IT HERE TO SHOW USE OF this.forceUpdate().