React Hooks - useContext

Ø useContext is a react hook that allows you access data from any component without explicitly passing it down through props at every level.

Ø useContext is used to manage Global data in the react app.

Ø React Context is a way to manage state globally.

Ø It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

The Problem

Ø State should be held by the highest parent component in the stack that requires access to the state.

Ø We have many nested components. The component at the top and bottom of the stack need access to the state.

Ø To do this without Context, we will need to pass the state as "props" through each nested component. This is called "prop drilling".

    Steps to use context

Step :1 Create Context

Ø Create new folder context under src folder and add new file AppContext.jsx

 

import {createContext} from “react”;

export const AppContext = createContext();

const  ContextProvider =  (props) => {

      const phone = “1234567890”

      const name=”TestUser”

      return (

                  <AppContext.Provider value={{phone, name}}>

                              {props.children}

                  <AppContext.Provider>

)

}

export default ContextProvider

Step : 2 Providing Context

Ø Go to main.jsx and add below code

import React from ‘react’

import ReactDOM from 'react-dom/client'

import App from ' ./App.jsx'

import './index.css'

import ContextProvider from './context/AppContext.jsx'

 

ReactDOM. createRoot(document.getElementById( 'root')).render (

<ContextProvider>

<App />

</ContextProvider>

)

  

Step : 3 Consume Context

i.)  Create new file footer.jsx under components folder and type rafce which will generate code for basic react component.

 

import React from ‘react’

const Footer = () => {

      return (

            <div>

<h2>Footer</h2>

</div>

)

}

export default Footer

 

ii.) Create new file profile.jsx under components folder and type rafce which will generate code for basic react component.

 

import React  from ‘react’

const Profile = () => {

      return(

            <div>

            <h2>Profile</h2>

</div>

)

}

export default Profile

ii.) Create new file Contact.jsx under components folder and type rafce which will generate code for basic react component.

import React  from ‘react’

const Contact = () => {

      return(

            <div>

            <h2>Contact</h2>

</div>

)

}

export default Contact

 

iv.) impot component in App.jsx file

import React from ‘react’

import ‘./App.css’

import Profile from ‘./components/Profile’

import Footer from ‘./components/Footer’

function App() {

      return  (

            <>

            <Profile />

            <Footer />

</>

)

}

export default App

V.) Add Contact component inside Profile component.

import React  from ‘react’

const Profile = () => {

      return(

            <div>

            <h2>Profile</h2>

            <Contact />

</div>

)

}

export default Profile

 

VI.) provide phone number in contact and footer component

Contact.jsx

import React  from ‘react’

const Contact = () => {

      return(

            <div>

            <h2>Contact</h2>

            <h3>Phone: </h3>

</div>

)

}

export default Contact

Footer.jsx

import React from ‘react’

const Footer = () => {

      return (

            <div>

<h2>Footer</h2>

<h3>Phone: </h3>

</div>

)

}

export default Footer

 

VII.) useContext is used to consuming context, add AppContext inside useContext.

 

Footer.jsx

 

import React, { useContext } from ‘react’

import { AppContext } from ‘../context/AppContext’

const Footer = () => {

      const {phone, name} = useContext(AppContext)

      return (

            <div>

<h2>Footer</h2>

<h3>Phone: {phone}</h3>

<h3>Name: { name }</h3>

</div>

)

}

export default Footer 

 

Contact.jsx

 

import React, { useContext } from ‘react’

import { AppContext } from ‘../context/AppContext’

 

const Contact = () => {

const {phone, name} = useContext(AppContext)

      return(

            <div>

            <h2>Contact</h2>

            <h3>Phone: {phone}</h3>

<h3>Name: { name }</h3>

</div>

)

}

export default Contact