About
This page is about rendering in React (ie update of the DOM)
Trigger
To make the UI interactive, you need to be able to trigger changes to your underlying data model.
Root
The root element is the element passed to the ReactDom.render function as argument.
Children Component
state
A change of state trigger a changes of UI (ie will render the component again)
For:
- a function component, see What is the useState Hook and how to use it? Local State in a React Function Component
setMyVariable("NewValue");
- a class component, see React Class Component - Local State
this.setState({ "whatever":"whatever"});
props
A change of props does not trigger a changes of UI. props define the original state.
Lifeycle
In React:
- Rendering is called mounting
- Removing is called unmounting
- Updating is called updating
Lifecycle management is different by type of component syntax used. For:
- function component, see React Function Component - Lifecycle
- class component, see React Class Component - Rendering (Mounting/Unmounting)
Management
Conditional
Conditional rendering with control flow statement (such as if, then else, … or the conditional (ternary) operator).
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
No Rendering
The component must return null instead of its render output
Rendering
ReactDOM.render on the browser
ReactDOM.render is the main function that renders an element.