React Force Rerender - 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 i.e. react force rerender, react force update.
After the initial mounting of components, a re-rendered will occur when:
- A components
setState()method is called - A components
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-render in the virtual DOM, it does not follow always 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.
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.
Forceupdate React, React Rerender Component Notes
NEVER UPDATE THE STATE USING this.state., DID IT HERE TO SHOW USE OF this.forceUpdate().
Jump to React JS, react.createelement, JSX Inline Style or use the menu.
