
## Introduction 

MongoDB is a NoSQL databasе, providing flеxibility in data storagе. Exprеss.js is a back-end web application framework for Nodе.js, streamlining sеrvеr-sіdе web application dеvеlopmеnt. Rеact.js is a front-еnd library or front end javascript framework for building user interfaces. It enable efficient rendering and handling of components. Nodе JS runtime environment, allowing sеrvеr-sіdе execution using JavaScript.

Togеthеr, thеsе technologies form a powerful full stack development framework for developing modern, scalablе, and rеsponsivе web applications. Developers benefit from a unified JavaScript language across thе еntirе stack, encouraging a smoother dеvеlopmеnt process and facilitating the creation of feature-rich, rеal-timе wеb applications.

![Create routes via your file + folder structure](why-mernstack.png)

## Conclusion

So, that is all about why you need to choose MERN stack for your next web application development. Additionally, thе sеamlеss intеgration, community support, and scalability makе it an idеal choicе for building modеrn, dynamic wеb applications. The MERN components together create an efficient development environment.


Reasons To Adopting A MERN Stack In 2024


## Introduction

No user will want to waste their time on a web application that requires excessive patience from them. Time is a valuable resource. React is a well-liked framework that programmers trust for fast rendering. React is used by well-known companies like LinkedIn, DropBox, CSDN, Baidu, and others because of this.

Developers can intelligently and actively ensure React performance optimisation approaches by taking a few key measures into consideration and indicating them. React, however, even renders many irrelevant components resolving such speed difficulties.

## Proven Ways to Improve & Boost React Performance

![Create routes via your file + folder structure](optimizing-react-thumb2.png)

Making incorrect async calls when you write React code over time leads to a rise in the bundle size of a React-based progressive web application. The longer loading time of the React application is a direct result of the larger bundle size.

The build size of the programme can be optimised using a few tools and tricks, nevertheless, to reduce the loading time. To get around the expensive DOM operations, there are excellent React performance optimisation approaches that we suggest. Discover how. To get around the expensive DOM operations, there are excellent React performance optimisation approaches that we suggest. Discover how.

## Conclusion

We hope you will follow and put into practice the React app performance optimization advice that we have offered in this blog now that you have a clear understanding of React performance challenges and React performance techniques.


Tips for optimizing React performance in 2024


## What is the DOM?

Before starting with virtual DOM, let’s refresh our knowledge about what DOM is.

DOM stands for Document Object Model. It is a programming interface that allows us to create, change or remove elements from the document.

When a user requests a webpage, the browser receives an HTML document for that page and it then constructs a tree like structure from the HTML to show the page. This tree-like structure is DOM where every node represents an HTML element.

## Disadvantages of DOM:

Every time the DOM gets updated, the updated element and its children have to be rendered again to update the UI of page.

Let’s take a simple example,

document.getElementById('some-id').innerValue = 'updated value';
When the above code is executed, the DOM undergoes the following steps:

1. The browser locates the HTML element with the specified id.
2. It removes any child elements from that particular element.
3. The element is updated with the ‘updated value’.
4. The CSS for both parent and child elements is recalculated.
5. The layout is updated.
6. Finally, the DOM is painted on the screen.

Recalculating the CSS and updating the layout involves complex algorithms and affects the performance. So react uses the Virtual DOM.

How is the virtual DOM different from real DOM?
As the name suggests, the virtual DOM is a lightweight replica of the actualht DOM. The virtual DOM can be saved in the browser memory and doesn’t change what is on the user screen. It provides a mechanism that allows the actual DOM to compute the minimal DOM operations while re-rendering the UI.

There are two phases in the React DOM strategy, rendering and reconciliation.

When an HTML element is updated, the virtual DOM is updated. Then React compares the virtual DOM with the snapshot of the virtual DOM taken just before the update, determines what element was changed and then updates only that element in the actual DOM. This is how the re-rendering is optimised.

Let’s consider the following HTML code and assume that the page gets re-rendered after certain interval of time.

```js
<div>
  <h3> Current Time </h3>
  <span> Time: {new Date().toLocaleString()} </span>
</div>
```

![Create routes via your file + folder structure](virtual-dom-thumb2.png)

React’s render() function creates the tree like structure. The initial render is seen on the left-hand side of the above image. When the state is updated, render() provides the new tree on right with updated time. Then it uses the diffing algorithm to determine the difference between both the trees. This process is called Reconciliation.

After the reconciliation process, React uses a renderer library which takes this information and renders the new DOM ensuring that only updated nodes are modified in the actual DOM.

Updates to the real DOM are sent in batches instead of updating it after every single change which leads to increased performance.

React also provides a set of life cycle methods that allow developers to control the reconciliation process, such as shouldComponentUpdate and forceUpdate, which can be used to optimise the performance of components.

## Diffing Algorithm

The diffing algorithm checks nodes in two virtual DOM trees by starting from the root node and recursively going through each node.

If a node in the old virtual DOM tree matches a node in the new virtual DOM tree in type and props, it is considered unchanged, and its children are checked next.

If a node in the new virtual DOM tree differs from the corresponding node in the old virtual DOM tree, it is considered changed, and the relevant part of the real DOM is updated.

React has a method to speed up the comparison process by using keys on elements. By assigning a key to an element, React can match elements in the old and new virtual DOM trees using the key, instead of comparing the entire tree. This helps React quickly identify which elements have been modified and which have not, leading to quicker and more effective updates.

## Conclusion

In conclusion, the Virtual DOM is one of the important concepts in React which boosts its speed and efficiency. It allows efficient updates in the UI improving the overall performance of React.


Virtual DOM in React


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)


Hi, I'm Kartik

Featured Posts

Reasons To Adopting A MERN Stack In 2024

Tips for optimizing React performance in 2024

Virtual DOM in React

Getting Started with NextJS