ReactJs

Context api

What is Context API?
Context API is used to pass global variables anywhere in the code. It helps when there is a need for sharing state between a lot of nested components. It is light in weight and easier to use, to create a context just need to call React.createContext(). No need to install other dependencies or third-party libraries like redux for state management.
Why is context API used?
Context API solves the problem of prop drilling in React. Prop Drilling occurs when data is to be passed between multiple layers before finally sending it to the required component. This makes the application slower. This problem is solved by Context API as it creates global variables to be used throughout the application without any middle components involved.It is also easier to use than React Redux

Working of Context API
To work with Context API we need React.createContext. It has two properties Provider and Consumer. The Provider acts as a parent it passes the state to its children whereas the Consumer uses the state that has been passed.

Benefits of Context API over React Redux
In Redux we have to manipulate or update multiple files to add even a single feature but in Context it can be done in much lesser lines of code
One way data binding in React is maintained using Context whereas Redux violates it.
Multiple stores/contexts can be created using Context whereas Redux creates just a single store
Implementing Context API

d:/>npm i create-react-app 
d:/>npx create-react-app context-api
d:/>cd context-api
d:/context-api>npm start

Step -1 Create a file context.js in src folder
import React from 'react'
const contextdata = React.createContext();

export const Provider = contextdata.Provider;
export const Consumer = contextdata.Consumer;

Step-2 Add a code in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from './context';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider value={{"name":"prabhpreet","course":"MERN"}}>
        <App />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

step-3 create afile in displayprofile.jsx in componants folder
import { Consumer } from "../context"
const Displayprofile = ()=>{
    return(
        <>
            <h1>Welcome Dear Students</h1>
            <Consumer>
                {(value)=>(
                    <>
                        {value.name}  {value.course}
                    </>
                )}
            </Consumer>
        </>
    )
}
export default Displayprofile;

App.js
<Displayprofile/>