React - Rendering (Lifecycle)


This page is about rendering in React (ie update of the DOM)


To make the UI interactive, you need to be able to trigger changes to your underlying data model.


The root element is the element passed to the ReactDom.render function as argument.

Children Component


A change of state trigger a changes of UI (ie will render the component again)


this.setState({ "whatever":"whatever"});


A change of props does not trigger a changes of UI. props define the original state.


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:



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


ReactDOM.render on the browser

ReactDOM.render is the main function that renders an element.

See React - ReactDOM.render

ReactDOMServer on the server

See React - Server Side Rendering (SSR) - DOM Server


Documentation / Reference

Discover More
How to catch exceptions/errors in React?

This page is exception handling In React. When an non-catched javascript error occurs: React remove its UI (ie stop rendering the tree) from the screen. And show a special component known as error...
How to create a Select element in React?

This page is the creation of a HTML select element in React and how to handle it in a form In a non-controlled fashion, you need to read the value from the HTML select DOM element. form implementing...
How to render Jsx code in the browser

This article shows you how you can render JSX in the browser
How to render React on the Server (SSR) in Static Markup (renderToStaticMarkup)?

This page shows you how to render React in a static HTML page (known in React as static markup) - ie only HTML element without any React properties or React library. The page then doesn't need to be hydrated....
How to render a List of React Elements (Component, )?

This page is Loop in React and Jsx. Example with Pure Javascript map is the Reference/Global_Objects/Array/mapArray Map function with an Arrow function as argument Example in React By adding...
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React - Getting Started (The Welcome Element)

React is a virtual dom library that: permits to define the HTML dom programmatically will update HTML dom incrementally There is basically two big steps when you work with React (or any virtual...
React - How to persist the local state between rendering without any library? (custom useState Hook)

This article shows you how to persist your local state (ie React state) between re-render without the use of any state library We will use the classic React counter. If you refresh the page or unmount...
React - Local component state (known as State)

This page is the local state of a component. In React, this local state is known as state A change of value triggers a rendering State is useful for handling data that is local to the component...

Share this page:
Follow us:
Task Runner