React Virtual-DOM and JSX

React Virtual-DOM

React is a JavaScript library. DOM means Document Object Model. It is a representation of structured HTML elements which is present in the webpage. Virtual-DOM is a copy of DOM, and it’s lightweight.

How It Works

The Component Tree structure for the above DOM is created internally by React. When we make a component, react builds the tree of it and adds it to DOM according to its parent. So when the DOM starts to work, first of all, it makes the component dirty. There is an anonymous function() in react event listener. It has a setState() function, which marks the component dirty. It marks the whole component dirty, not just an HTML element in DOM. After that, React updates the Virtual DOM to use the diffing algorithm to update the actual DOM.

JSX

JSX provides syntactic sugar for the React.createElement(component, props, …children) function. Lets see from an example,

<Tag property=”attribute”>
Inside of tag
</Tag>
React.createElement(
Tag,
{property: ‘attribute’},
‘Inside of tag’
)

Props

To send props through components, you have to surround the props with {}. Like,

<Component {props} />
<Component stringLiterals = {‘props’} />
<Component defaultValue = {true} />
const props = {key1: ‘value1’, key2: ‘value2’};
<Component {…props} />

Children of JSX

Anything in the starting and closing tags of the component will be sent as children. The props are props.children.

<Component> String Literals </Component>
<ParentComponent>
<ChildComponent1/>
<ChildComponent2/>
</ParentComponent>

Production Build

There are two types of build versions in React. One is a development build, and another one is a production build. When you are testing your web application, make sure it is in the production build. It will show some warnings, which makes the app faster. And when working on an app, make it to development build. To create a production build, just run

$ npm run build
$ npm start
npm install — save-dev terser-brunch
or
yarn add — dev terser-brunch
$ brunch build -p

Long Lists Can Be Virtualized

I suggest using a technique known as “windowing” if your application makes long lists of data (hundreds or thousands of rows). At any given time, this technique only makes a small subset of your line. React-window and react-virtualized are the best windowing libraries to do this. It will help to reduce the re-rendering time.

Reconciliation can be avoided

When a component’s props or state are modified, React compares the newly returned element to the previously rendered one to determine if an actual DOM update is required. React will update the DOM if they are not similar.

Not Mutating The Data

To avoid mutating the data you can use spread operator. For example,

functionName() {
this.setState(state => ({
words: […state.words,’newWord’],
}));
};

Sources

  1. How Virtual-DOM and diffing works in React | by Gethyl George Kurian | Medium
  2. JSX In Depth — React (reactjs.org)
  3. Optimizing Performance — React (reactjs.org)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store