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.
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.
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.
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.
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
- The difference between the previous Virtual DOM representation and the new one will be calculated.
- The real DOM will be updated with what has actually changed. This is very much like applying a patch.
Real DOM Vs React DOM
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
First is fast UIs
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.
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:
- 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.