React - (Component) Updating

About

updating is a lifecycle render step that updates a component.

An update is triggered by a change of state.

Example

Function Component

See React Function Component - Lifecycle

Class Component

See React Class Component - Rendering (Mounting/Unmounting)

Diff

React DOM compares the new element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>

Below React will modify only the time part (Not the the text It is as React split them in different nodes.

Note that the text It is is not modified as React split them in different nodes. React Render Element Splittsing





Discover More
React - Element

An element is a node in the React tree (React DOM implementation). component getting started createElementjsx filescreateElement e A counter component with a useState hook to show how to call...
React - Rendering (Lifecycle)

This page is 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...
React Function Component - Lifecycle

lifecycle rendering in functional component are managed through effect A mount run the body of the effect function (equivalent to a mount) A unmount (called also cleanup) runs the function returned...



Share this page:
Follow us:
Task Runner