React Concepts

#react

Component Lifecycle:
Every single part utilized in React has its lifecycle which can be checked and controlled in the three periods of its Lifecycle. The three fundamental periods of a React Component's lifecycle are:

Mounting: Mounting alludes to the method involved with placing the various components in the DOM. There are four unique techniques that are brought in a specific request composed beneath to mount apart:

Constructor(): The principal technique which should be called is a constructor(), it is characterized when we start the part. This is the most appropriate spot to set the underlying states and qualities. The props are called alongside the constructor() technique as contentions. Super(props) ought to be consistently called at the very beginning prior to calling anything more as it starts the parent constructor strategy and the parts effectively acquire the techniques from the parent.
getDerivedStateFromProps(): Before rendering of the components into the Document Object Model (DOM), the getDerivedStateFromProps() technique is called. This is the most reasonable spot to set up the state object which depends on introductory props. The state is taken as contention and an item is returned alongside the progressions in the state.
render(): Render() is the technique used to deliver the results of the HTML to the DOM and the render() strategy is one of the main pieces of the code.
componentDidMount(): Subsequent to delivering the part, we want to call the componentDidMount() strategy. Here the assertions are run which required the parts to be in the DOM.

Updating: Updating the part is considered the second stage in the part lifecycle. At whatever point there is an adjustment of the condition of the part, the part should be refreshed. For refreshing, there are five techniques utilized and are brought in the request beneath:

getDerivedStateFromProps(): At the point when we start the refreshing stage, the main strategy which gets called is the getDerivedStateFromProps technique.
should ComponentUpdate(): The shouldComponentUpdate() technique returns a Boolean worth. It affirms that assuming React should proceed with delivering or should stop. Genuine is the default esteem returned.
render(): At whatever point the part should be refreshed, we need to call the render() technique. Re-delivering of HTML is to be done to the DOM with the new changes in general.
getSnapshotBeforeUpdate(): getSnapshotBeforeUpdate() strategy permits us to check the upsides of the states and props which were before the update. At whatever point we are utilizing the getSnapshotBeforeUpdate() strategy, we really want to incorporate the componentDidUpdate() technique to make the coding blunder-free.
componentDidUpdate(): Subsequent to refreshing the part into the DOM, we really want to call the componentDidUpdate technique.

Unmounting: The last stage in the Component lifecycle is the Unmounting stage. In this stage, we eliminate the part from the DOM. There is the main strategy called to unmount the part:

componentWillUnmount(): At the point when we really want to eliminate or unmount apart from the DOM, we call the componentWillUnmount strategy.

Virtual DOM: In basic words, virtual DOM is only a duplicate of the first DOM kept in the memory and synchronized with the genuine DOM by libraries like ReactDOM. This cycle is called Reconciliation.
Virtual DOM has the very properties of the Real DOM, however, it does not have the ability to straightforwardly change the substance of the screen.

How Virtual DOM really makes things quicker: When anything new is added to the application, a virtual DOM is made and it is addressed as a tree. Every component in the application is a hub in this tree. Thus, at whatever point there is an adjustment of the condition of any component, another Virtual DOM tree is made. This new Virtual DOM tree is then contrasted and the past Virtual DOM tree and make a note of the changes. Later, it tracks down the most ideal ways of rolling out these improvements to the genuine DOM. Presently just the refreshed components will get delivered on the page once more.
Diffing- algorithm: While diffing two trees, React first looks at the two root components. The conduct is distinctive relying upon the sorts of the root components.
React utilizes a method called the diffing calculation to contrast the old DOM with the new. Diffing is a heuristic calculation dependent on two suspicions:
Two components of various sorts will create various trees.
The designer can indicate what components will stay stable across renders with a key prop.