What is Component in React? and Understand Virtual DOM


In this article, we are going to understand what is virtual DOM and Component in React. So we will first take a look at react Component and move ahead and learn Virtual DOM. Let’s take each one by one.

Component

You can think of a component as a small feature that makes up a piece of the user interface. The different component has different features. Every component has their own methods properties and their own APIs. The reason behind the component used in the react is to provide reusability of the component in react. Every component is independent and might interact with each component independently.

Let’s say you have a blog. we will call this blog as an app. This App has a navigation menu. Trending posts, recent post, and profile section. So each of these represents a component in react. So here navigation menu is a separate component trending post and recent post are also separate components as well as the profile section.

Each component has their own visual representation and their logic.

component in react

So each component is a piece of UI.  you can build this component in isolation. And put them together to build Complex UI. Components are based on component-based architecture. Not to be confused with web components, It is just the most recent implementation of the component-based architecture.

The benefit of using component-based architecture is you can extend,  replace reuse And encapsulate components in react. This architecture Generally tends to be Is there to rescue maintain and extend the Monolithic UIs.

Virtual DOM

We’ve all heard that updating the Document Object Model (DOM) directly is inefficient and slow. However, few of us actually have the data to back it up. The buzz about React’s Virtual DOM is that it is a more efficient way to update the view in a web application, but very few of us know exactly why and whether this efficiency will result in faster page render times.

So Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

Hence Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created.

This is where things get interesting. Updating the browser’s DOM is a three-step process in React.

  1. Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
  2. The difference between the previous Virtual DOM representation and the new one will be calculated.
  3. The real DOM will be updated with what has actually changed. This is very much like applying a patch.
Real DOM Vs React DOM

Virtual DOM

What makes React and its Virtual DOM so different is that it’s simpler than other approaches to making JavaScript reactive from a programmer’s perspective. You write pure JavaScript that updates React components, and React updates the DOM for you. The data binding isn’t intertwined with the application.

React uses one-way data binding to make things simpler. So Every time you type in an input field in a React UI, for example, it doesn’t directly change the state of that component. Instead, As a result, React updates the data model, therefore causes the UI to be updated and the text you typed into the field appears in the field.

 

Benefit of React

Nowadays you can say a competitor of the act as backbone and angular. Each new generation of JavaScript Framework has bought something new to the table. React is unique in this. What is new is react challenge some more core concept Used by the most popular front end frameworks.

First is fast UIs

When your working with the react application that provides outstanding performance. Thanks for the virtual Dom and smart reconciliation algorithm. The second benefit of using react is Easy to learn and easy to use. while we are going to learn react you will notice react is not a complex language that takes almost a life to learn the whole concept. Anyone who comes from a JavaScript background can understand and start using React in a few days

reusable components

The component has its own logic and controls its own rendering, and can be reused wherever you need them. Code reuse helps make your apps easier to develop and easier to maintain. They also help you implement a consistent look and feel across the whole project.

JSX

The JSX syntax is a nice and healthy blend of JavaScript and HTML. JSX simplifies the whole process of writing components for the websites and the HTML aspect allows your developers to render functions without concatenating strings.

Efficient data binding

ReactJS follows one-way data binding, which exactly means that anyone can track all the changes made to any segment of the data. So, this signifies the clarity and simplicity of this platform.

 

SOME ADDITIONAL ADVANTAGES OF REACTJS:

Makes JavaScript coding easier

  • Extremely efficient
  • Excellent cross-platform support
  • Handles dependencies
  • Template designing made easy
  • Provides amazing developer tools
  • UI focused designs
  • Easy to adopt

Combining all these things react is an application makes you more comfortable and save a lot of time to build a web application.

I hope you understand what is Virtual DOM and Component in React. In the next article, we will move further.

Leave a Reply

Your email address will not be published. Required fields are marked *