DEV Community

Cover image for React UseContext is Simple
KenjiGoh
KenjiGoh

Posted on • Edited on

17 4 1 1 1

React UseContext is Simple

Why use UseContext?

React useContext hook is used to create global data that can be accessed throughout the component hierarchy without the need to keep passing the props down manually to each component level.

This process of manually passing props down each level of child components (even though some child level does not need the data) to eventually reach the target child component is called Prop Drilling. Using useContext can help resolve this tedious process of Prop Drilling!

Simplified code snippets

In Parent component or App.js, we just need to create & export the context, literally by using the createContext hooks! Simply use these few lines of code:

// in App.js
import {createContext} from 'react';
export const contextToPassDown = createContext();
Enter fullscreen mode Exit fullscreen mode

Then wrap the context Provider over the child components you wish to provide the context

<contextToPassDown.Provider value={dataToPassDown}>
   <ChildComponent />
</contextToPassDown.Provider>
Enter fullscreen mode Exit fullscreen mode

Then in any Child components that are wrapped by the tag, we just need to use the useContext hooks!

// in ChildComponent.js
import {useContext} from 'react';
import {contextToPassDown} from App.js;

const ChildComponent=()=>{
  const contextToUse = useContext(contextToPassDown);

  return (<div> {contextToUse.username} </div>);
}

export default ChildComponent;
Enter fullscreen mode Exit fullscreen mode

The use cases for useContext are usually:

  1. To Pass down logged-in user info to authorized components
  2. For 'light' or 'dark' theme

You may practice using this link to: codesandbox

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (8)

Collapse
 
sgarciadev profile image
Sergei Garcia

Congrats on your second post! But I agree with @code913 , this is a pretty low quality post. Some tips for your next one:

  • Always assume your reader has no idea what you are talking about. Nowhere in your article did you explain what React Context was, what problem it solves, or why you should use it
  • Consider annotating your code examples with more comments.
  • Consider a longer article length. Too short and it comes off as low quality and something that could have been a comment. Too long and people won't find it interesting.
Collapse
 
kenji_goh profile image
KenjiGoh

Thanks for all the tips! I oversimplified the post!:)

Collapse
 
lalami profile image
Salah Eddine Lalami

@ IDURAR , we use react context api for all UI parts , and we keep our data layer inside redux .

Here Article about : 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux like Style) ⭐ : dev.to/idurar/mastering-advanced-c...


Mastering Advanced Complex React useContext with useReducer (Redux like Style)

Collapse
 
markewers profile image
Mark Ewers

I found this helpful. Thanks for posting.

Collapse
 
wkrueger profile image
wkrueger

Never use condescending language. It is toxic.

Collapse
 
kenji_goh profile image
KenjiGoh

Thanks for the feedback! did not intend to be condescending! :)

Collapse
 
kenji_goh profile image
KenjiGoh

thanks for the feedback!

Collapse
 
djavohir profile image
D-Javohir

rahmat menga yoqdi qisqa tushunarli qilibsiz

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay