Some important core concept of react js

We know that react js is a popular javascript library. I will try to discuss some core concepts about react. so let’s started.

1. Virtual Dom:

Virtual dom is an important concept of react. When react render elements in the browser, it renders as a tree structure but before renders in the browser, it generates a virtual dom which is the same as browsers elements that means react take a copy in memory for later. When we update or make changes to any elements react generates another virtual representation of the updated elements. After that, it compares with the previous version and checks the difference between them. Figuring the changes react only updated the changes and renders it to the browser. It is also known as tree reconciliation. This is the cool thing of react.

2. Optimizing Performance:

There are several ways to speed up react application. React use different technique to speed up and boost application. It generally minimizes DOM operation as much as possible.

• Use production build: Sometimes you can face some performance issues in development mode. In development mode codes are not minified and additional files are included there. So You need to make a production version of the code then it will be minified and optimized.
• Brunch: For a brunch production build, you need to install terser-brunch.

// using npm
npm i --save-dev terser-brunch
// using yarn
yarn add --dev terser-brunch

After that create production build add -p to the build command like this

brunch build -p

Note: This is only for a production build. If you use -p or terser-brunch for development then the build might be slower because it will hide warnings of react which is very useful for development.

• Avoid Reconciliation: React render a virtual copy of elements and maintains it. These virtual elements let react avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower operations on javascript objects.