State is an essential part of our React application, hence, the need to pass to different components. state/data is passed top-down (parent to child) via props. This is called PROP DRILLING.
This method becomes complex as the application grows and as many components require different props.
Things can get messy in a twinkle of an eye.
Context provides a way to share values like these between components without having to pass a prop through every level of the tree.
In this guide, we would talk about context API, and its usage and build a mini-project ( a search application ) with it.
Let's dive in.
Context is designed to share data that can be considered global for a tree of React components, such as the current authenticated user, theme, etc.
I am guessing your editor is already set up.
Set up Context API
First, we have to create a file called ResultContext.js (feel free to name it whatever you want) and import the required hooks.
import React , { useContext , useState , createContext } from "react"
- Create Context
const ResultContext = createContext()
- Create a "Provider" and add {children} as a prop
export const ResultContextProvider = ( {children }) => {
//state for results
const [results , setResults ] = useState([]);
//state for search Term
const [searchTerm , setSearchTerm ] = useState('Elon Musk');
//create a function to fetch data
const getResults = async () => {
const options = {
method: 'GET',
headers: {
'X-API-Key': process.env.REACT_APP_API_KEY,
}
};
const response = await fetch('https://google
search3.p.rapidapi.com/api/v1/search', options)
const data = await response.json();
//set results to the results gotten from data fetched
setResults(data.results)
}
- Return Context.Provider inside the previously created Provider and set value to the props to be passed.
return (
<ResultContext.Provider value= { { getResults , results , searchTerm , setSearchTerm } } >
{children}
</ResultContext.Provider>
)
}
We are done with setting up our context file. In summary:
- We created context using the createContext() hook.
- We created A "provider" and passed {children} as a prop and returns ResultContext.Provider.
- We fetched data and set the results state to the data fetched.
- We returned a ResultContext.Provider and set value to the states we want to pass as props into other components. Whatever we pass into the value prop will be available throughout our app.
Wrap the App component with the Provider
import React from 'react';
import App from './App';
import { ResultContextProvider } from
'./context/ResultContextProvider';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
//wrap <App /> with Provider to make state available through app
root.render(
<ResultContextProvider>
<Router>
<App />
</Router>
</ResultContextProvider>
);
Consume the props
Now the state/Props are available throughout the App, we now need to consume them.
Import the required Hooks
import React, { useEffect, useContext } from 'react'
The useContext hook is used to get the props from the context.Import the context
import { ResultContext } from '../context/ResultContext'Get the props from the context using useContext
//component for search
import React, { useEffect, useState, useContext } from 'react';
import { ResultContext } from '../context/ResultContext';
const Search = () => {
//get prop from context
const { setSearchTerm } = useContext(ResultContext);
const [text, setText] = useState('');
//change the value of text throughout our app
useEffect(() => {
if (text) {
setSearchTerm(text)
}
}, [text]);
return (
<div>
<div>
<input
value={text}
type="text"
onChange={(e) => setText(e.target.value)}
/>
{text !== '' && (
<button type="button" onClick={() => setText('')}>x</button>
)}
</div>
)
}
export default Search;
//component displaying result
import React, { useEffect, useContext } from 'react'
import { useResultContext } from '../context/ResultContext';
const News = () => {
const { results, getResults, searchTerm } = useContext(ResultContext);
useEffect(() => {
if (searchTerm !== '') {
getResults();
}
}, [searchTerm]);
return (
<div>
{results?.map(({ link, title, description }, index) => (
<div key={index}>
<a href={link} target="_blank" rel="noreferrer">
<p>{link.length > 30 ? link.substring(0, 30) : link}</p>
<p >{title}</p>
<p>{description}</p>
</a>
</div>
))}
</div>
)
}
export default News
Conclusion
The main takeaways from this article include the following:
The React Context API is designed for prop drilling
This example is fairly simple and I hope you’ve been able to understand how to handle State in React using the context API.
Top comments (6)
Just a tip, label the files you're describing with the name of the file, it makes the whole post much easier to follow.
I'm not sure if dev.to supports it, but with some markdown engines, you can do something liek this, for example:
Thank you Nico.
I use often multiple contexts and sometimes I need to share the same setter to both, how do you avoid running the setter rerendering both trees?
I hope this article will help you ✌️
kentcdodds.com/blog/how-to-use-rea...
kentcdodds.com/blog/how-to-optimiz...
I think the author of this post needs this article, I understand the problem.
The swimming pic is really amazing😂!