DEV Community

Cover image for React Context vs Provider vs Hook - What’s the Difference? 🤔
giangntse150746
giangntse150746

Posted on

React Context vs Provider vs Hook - What’s the Difference? 🤔

Okay, so you just got into a React project and suddenly you're surrounded by words like Context, Provider, and useSomething(). It's like walking into a secret club and everyone knows the handshake but you. Don't worry-I got you. 💪

Let’s break this down React-style, like you're explaining it to a friend over coffee (or boba, no judgment).

🧠 1. Context - The Idea Guy

Image description

Think of Context as the blueprint. It’s like saying:

“Hey, we’re going to have this thing called ‘Theme’, and it could be ‘light’ or ‘dark’. That cool?”

You define it like this:

const ThemeContext = React.createContext("light");
Enter fullscreen mode Exit fullscreen mode

That’s it. No real data yet. Just a promise. Like someone saying, "We should totally hang out sometime." 😄

📦 2. Provider - The One Who Brings the Goods

Image description

The Provider is the one who shows up with pizza. 🍕

When you use a Provider, you're saying:

“Alright, everyone inside this component tree gets this value for the context.”

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>
Enter fullscreen mode Exit fullscreen mode

Boom. Now your whole app (or part of it) knows the theme is "dark", without you passing props 7 levels deep like some kind of prop pack mule 🧳.

🪝 3. Hook - Your Access Pass

Image description

You want to use the theme? Like actually do something with it? Enter the hook:

const theme = useContext(ThemeContext);
Enter fullscreen mode Exit fullscreen mode

Hooks are like, “Yo, I’m here for that context value you promised. Let’s roll.”

And hey, if you're fancy (and you should be), wrap it in a custom hook:

const useTheme = () => useContext(ThemeContext);
Enter fullscreen mode Exit fullscreen mode

Now your components don’t need to know where or how the context works. They just go:

const theme = useTheme();
Enter fullscreen mode Exit fullscreen mode

and move on with their lives. 🎉

🎯 TL;DR - Or as I call it, the Dev-Order Combo:

  • Context → Defines the shape (like the empty box 📦).
  • Provider → Fills the box with goodies 🧁.
  • Hook → Opens the box and uses the goodies 🎁.

💡 Real-World Example: Auth

  • You define AuthContext → your app knows there's an auth state.
  • You wrap parts of the app in <AuthProvider> → maybe it checks tokens, keeps user info.
  • Inside any component: const { user } = useAuth() → boom, you're logged in, baby.

So, next time you hear someone say,

“Just create a context and wrap your app in a provider, then use a hook to consume it,”
you’ll be like, “Easy. Been there. Done that. Got the useContext() tattoo.” 😎

#ReactJS #Frontend #WebDevelopment #ContextAPI #Hooks #Providers

Top comments (0)