DEV Community


Discussion on: Guidance of how React works

lexlohr profile image
Alex Lohr

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.

pmudra profile image
Philipp Mudra

Even though Alex is right about these main concepts, a good thing about React is that you don't need to know all this in detail when you start learning.

There are many good ways to get started with React. Make sure to look into the official docs & tutorial as they are well done IMO. Also make sure to look into Create React App. That said there are so many resources out there for any level of experience. You really just have to search for them.

You can do it!

rounakcodes profile image

Well answered!
A counter and todo app will attract an audience and sell but no one cares to teach these fundamentals first. And we all know who suffers the most!