React UI Update (Circular Diagram)

Circular Diagram Of Simple React UI Update On State/Prop Change(Static)

Circular Diagram Of Simple React UI Update On State/Prop Change(Animated)

STEP 1 :
➡️ Component Call By React

To generate the UI for the page, React traverses the tree of components, calling each one. React will pass each component any props set as attributes in the JSX.

STEP 2 :
➡️ Event Handler Specification By Component

The event handler may listen for user clicks, timers or resources loading. The handler will change the state when it runs later. React will hook up the handler to the DOM when it updates the DOM in step 4.

STEP 3:
➡️ UI Is Returned By Component

The component uses the current state value to generate its user interface and returns it, finishing its work.

STEP 4:
➡️ DOM Updation By React

React compares the description of the UI the component returns with the current description of the app’s UI. It efficiently makes any necessary changes to the DOM and sets up or updates event handlers as necessary.

STEP 5:
➡️ Firing Of Event Handler

An event fires and the handler runs. The handler changes the state.

STEP 6 :
➡️ Component Call By React

React knows the state value has changed so must recalculate the UI.

STEP 7:
➡️ Event Handler Specification By Component

This is a new version of the handler and may use the newly updated state value.

STEP 8:
➡️ UI Is Returned By Component

The component uses the current state value to generate its user interface and returns it, finishing its work.

STEP 9:
➡️ DOM Updation By React

React compares the description of the UI the component returns with the previous description of the app’s UI. It efficiently makes any necessary changes to the DOM and sets up or updates event handlers as necessary.

Inspired By John Larsen 🎯👏🕸🕷