React Lifecycle and context api
Published: 2022-01-15 12:40:15


Topic-1:React lifecycle.
React is most popular javaScript open source library and it is component based javaScript library. In every react component  has a lifecycle . These lifecycle of the component is divided into four lifecycle methods are not very complicated and called at various points during a components life. The react components life cycle id divided into four phase. They are:

Initial Phase
Mounting Phase
Updating Phase
Unmounting Phase


Initail Phase: It a first phase of the lifecycle of react component.In this phase the default state and props are contain by a component.By which the component starts working with Document object model.

Mounting Phase: It is the second phase of the life cycle of react component . It start after completing the initial phase.The component is rendered for the the first time in web page and mounted on the DOM. This mounted pashe are consists by predefined functions presented in bellow:

ComponentWillMount () : Before rendered a component into dom the componentWillMount() function is called.

ComponentDidMount() : After rendered a component into dom the componentWillMount() function is called.

Updating Phase: The very next phase of the lifecycle of react component is updating phase which is related to get new props and updated state.The task of this phase is ensure the latest version. 

In this phase the state and props are updated followed by some user events such as clicking , pressing a key on the keyboard. This phase consist of the following method.
ComponentWillReceiveProps(): This is exclusive function depending on props and is independent of states. When it receive a new props then it is called.
 
ShouldComponentUpdate() :when any changes occur to the DOM then the ShouldComponentUpdate function is called.
 
ComponentWillUpdate(): Before rendered a component into dom the componentWillUpdate() function is called.

ComponentDidUpdate() : After rendered a component into dom the componentWillUpdate() function is called.
    
Unmounting Phase: This is the last phase of the lifecycle of react component. When a components instance is unmounted from the DOM then it is invoked. This phase is created by only one function and this is:

ComponentWillUnmount(): This function is called before the components permanently destroyed or unmounted.

Topic-2: Context API

Context API we can think of as storage we can say the third party, where any provider can store data by creating context and then any component can use it.

That means Context API is a way of passing data. It passes data through the component at every level. In normal React application data passes parent to child, but when the app contains various components and it becomes complex to pass data to the child through this component here Context does the job, it provides a way to share values like these between components without having to explicitly pass a prop.

How to use: To use React Context API we have to define "React.createContext()". 

Syntax: 

const MyContext = React.createContext(defaultValue);

In React app:

import React, { createContext } from "react";
const UserContext = createContext();

createContext() returns a concumer and a provider.  

Context.Provider:
Provider is from where the context will be provided it will be parent and store will store data.

<MyContext.Provider value={/* some value */}>


Context.Consumer:
Consumer will be children or who consumes or uses the state.

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>