Guidance of how React works

React is based on 3 simple concepts:

• jsx (XML in JS) virtual DOM
• memoization
• reconciliation during render cycles

JSX is an extension to JS that allows you to write React.h('div', null, 'text') as <div>text</div> inside your JSX code. Both create a virtual DOM object that can be reconciled with the actual DOM.

Memoization is a technique by which you cache results of a function until certain properties change. This is used for handling side effects through useEffect and useLayoutEffect and costy calculations with useMemo and useCallback and state with useState and useRef.

When you mount a react component with ReactDOM.mount(<Component />, document.body), the first render cycle (mount phase) is started; all hooks are memoized and the initial DOM fragment is constructed inside document.body, directly followed by the layout phase in which useLayoutEffect side effects are applied. Whenever a property in the render tree changes, a new virtual DOM is constructed in the render phase, reconciled, then comes the layout phase again - until the unmount phase.