React UI Update (Circular Diagram)
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 🎯👏🕸🕷