In this age of digitized everything, we can’t imagine not being able to access mobile and web apps to do the things we need to do. Thanks to efficient frontend libraries like react, the development process for these applications are streamlined.
In simple terms, react is a library for rendering components into the Document Object Model (DOM). This is why it’s so popular among web developers – because it helps make user interfaces easy to build and maintain.
Using React, you can make changes to the data in your app’s state without having to reload the page. This allows you to update your application in response to changing user behavior, and keeps your code responsive and fast.
To do this, React follows the observable pattern, which means that each component has a state with data that can change over time. When the state changes, React will compare the new virtual DOM tree to the old one and update only the parts that need to be changed in the real DOM. This makes your app much faster than if you were manipulating the DOM directly.
To make this magic happen, first you need to identify all the components that are using a given state. Next, find their closest common parent — a component above them all in the hierarchy — and pass the state to that component. This is referred to as state delegation, and you can do it in either functional or class components.