DEV Community

Cover image for All About Virtual Dom and Context API
Md. Mizanur Rahaman
Md. Mizanur Rahaman

Posted on

All About Virtual Dom and Context API

Virtual Dom

In React, the virtual DOM (Document Object Model) is a programming concept in which a library like ReactDOM keeps an ideal, or "virtual," version of a user interface in memory and syncs it with the "actual" DOM. This is referred to as reconciliation.
Every virtual DOM object is modified when you render a JSX element. After the virtual DOM has been changed, React compares it to a virtual DOM snapshot obtained before the modification.

React detects which virtual DOM objects have changed by comparing the new virtual DOM to a version previous to the update. This process is called "diffing."
Once React has recognized which virtual DOM objects have changed, it updates the actual DOM with only those objects. React will rebuild your single checked-off list item in our previous example while leaving the rest of your list alone.

Context API

What is Context API

With React v.16.3, the new React Context API allows us to transfer data through our component trees, allowing our components to communicate and exchange data at different levels. We'll look at avoiding prop drilling using React Context in this tutorial. First, we'll define prop drilling and why we should avoid it.
React context API: How it works?

How Context API works?
React.createContext() all you need to know must. It will provide you with a customer and a provider. The provider is a component that supplies the state to its children, as its name indicates. It will contain the "store" and serve as the parent of any components that may require it. A component that consumes and utilizes the state is known as a consumer.

Top comments (0)