Scribd
Upload
3 views7 pages

WEB II State Management Basics Lesson008

The document explains state management using React's Context API, which allows global state access without prop drilling by creating a context, providing it to components, and consuming it with the useContext hook. It details the steps to create a context, wrap components with a provider, and access the context in child components. The example illustrates how to implement this with a user state across multiple nested components, highlighting the advantages of using Context API over traditional prop passing.

Uploaded by

BRIAN MUTURI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views7 pages

WEB II State Management Basics Lesson008

The document explains state management using React's Context API, which allows global state access without prop drilling by creating a context, providing it to components, and consuming it with the useContext hook. It details the steps to create a context, wrap components with a provider, and access the context in child components. The example illustrates how to implement this with a user state across multiple nested components, highlighting the advantages of using Context API over traditional prop passing.

Uploaded by

BRIAN MUTURI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

State management basics

Context API

State management using React's Context API involves creating a context to hold state, providing
the context to components that need access to the state, and consuming the state within those
components. This approach avoids prop drilling, where state is passed down through multiple
levels of components.

To implement state management with Context API:

 Create a context:

Using React.createContext(), a context object is created. This object includes a provider and a
consumer.

 Provide the context:

A provider component wraps the part of the component tree that needs access to the state. The
provider's value prop is used to pass the state and any update functions.

 Consume the context:

Components within the provider can access the state using useContext hook
or Context.Consumer. The useContext hook is generally preferred for its simplicity.

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.

To illustrate, 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".

The solution is to create context.

Create Context
To create context, you must Import createContext and initialize it:

import { useState, createContext } from "react";

import ReactDOM from "react-dom/client";

const UserContext = createContext()

Next we'll use the Context Provider to wrap the tree of components that need the state
Context.

Context Provider

Wrap child components in the Context Provider and supply the state value.

function Component1() {

const [user, setUser] = useState("Jesse Hall");

return (

<UserContext.Provider value={user}>

<h1>{`Hello ${user}!`}</h1>

<Component2 user={user} />

</UserContext.Provider>

);

Now, all components in this tree will have access to the user Context.

Use the useContext Hook

In order to use the Context in a child component, we need to access it using


the useContext Hook.

First, include the useContext in the import statement:

import { useState, createContext, useContext } from "react";

Then you can access the user Context in all components:


function Component5() {

const user = useContext(UserContext);

return (

<>

<h1>Component 5</h1>

<h2>{`Hello ${user} again!`}</h2>

</>

);

Full Example

src/context/UserContext.js

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

src/components/Component1.jsx

import { useState } from "react";

import UserContext from "../context/UserContext";

import Component2 from "./Component2";

function Component1() {

const [user, setUser] = useState("Jesse Hall");

return (
<UserContext.Provider value={user}>

<h1>{`Hello ${user}!`}</h1>

<Component2 />

</UserContext.Provider>

);

export default Component1;

src/components/Component2.jsx

import Component3 from "./Component3";

function Component2() {

return (

<>

<h1>Component 2</h1>

<Component3 />

</>

);

export default Component2;

src/components/Component3.jsx

import Component4 from "./Component4";

function Component3() {

return (
<>

<h1>Component 3</h1>

<Component4 />

</>

);

export default Component3;

src/components/Component4.jsx

import Component5 from "./Component5";

function Component4() {

return (

<>

<h1>Component 4</h1>

<Component5 />

</>

);

export default Component4;

src/components/Component5.jsx

import { useContext } from "react";

import UserContext from "../context/UserContext";

function Component5() {
const user = useContext(UserContext);

return (

<>

<h1>Component 5</h1>

<h2>{`Hello ${user} again!`}</h2>

</>

);

export default Component5

src/App.jsx

import Component1 from "./components/Component1";

function App() {

return (

<div className="App">

<Component1 />

</div>

);

export default App;

src/main.jsx

import React from "react";

import ReactDOM from "react-dom/client";


import App from "./App";

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

<React.StrictMode>

<App />

</React.StrictMode>

);

Key Concepts Explained

1. Context API:

o Creates a global state that can be accessed by any component without prop
drilling

o createContext() creates the context object

o Provider component wraps the part of the app that needs access to the context

o useContext() hook lets components consume the context

2. How This Example Works:

o Component1 is the provider of the user state

o Component5 is the consumer of the user state

o The intermediate components (2-4) don't need to know about the user state

o This avoids "prop drilling" (passing props through multiple layers)

You might also like