Loading video player...
We've been using the use context hook to
read values from context and it works
really well. But React 19 introduces a
new API called use that gives us a more
flexible way to consume context values.
Let's take a look at how it works. Right
now, our avatar component is using the
use context hook to access the user
data. Everything is working fine. Let me
show you how little needs to change to
use the new use API instead. First,
import use from React and then instead
of calling use context, call use. That's
it. Let's save this and check the
browser.
Refresh. And it works exactly the same.
Same result, same behavior. From a
syntax point of view, it's almost
identical. So the obvious question is if
this does the same thing, why introduce
a new API at all? Well, here is where it
gets interesting. The use API is not a
hook. And because it's not a hook, it
doesn't have to follow the rules of
hooks. Think back to the rules of hooks.
Hooks must be called at the top level of
your component. You can't call them
inside conditions, loops, or early
returns. Every render has to call hooks
in the same order. The use API doesn't
have these restrictions. You can call it
anywhere inside your component. Let me
show you an example. In real
applications, it's extremely common to
show a loading state. Maybe the parent
component is still fetching user data
and passes down loading flag as a prop.
Let's dstructure a prop in avatar. So is
loading to reflect that loading flag and
return a loading UI. We'll set the
default value to true. Now with the use
API in place, we can check if e is
loading is true and simply return early
and show a loading message. So if e is
loading is true, return a div tag that
says loading user data. Let's save this
and check the browser. You can see it
works perfectly. We see the loading UI
and React is completely fine with it.
Since use isn't a hook, React doesn't
enforce hook ordering rules. There is
another subtle benefit here. Because we
return early, the use call is never
executed. React doesn't even have to
walk up the component tree looking for
the context provider and we skip that
work entirely. But if we try the same
with use context, use context from react
and call this. You can already see
eslint warning us react hook use context
is called conditionally. React hooks
must be called in the exact same order
in every component render. Did you
accidentally call a react hook after an
early return? So if you want to return
early, you're forced to restructure your
component. So the hook call happens
before the condition even if the data
isn't needed yet. Let's switch back to
fix the error and now we are back to
working code. The use API also helps us
with one other thing but we'll take a
look at that later in the course. To
summarize what we've learned, use is
simply a more flexible alternative to
use context. It does the same job
reading values from context but without
the restrictions that come with hooks.
You will still see use context
everywhere in existing React 18 code
bases and it's not going away. But in
newer React 19 applications, the use API
is likely to become more common. And
that wraps up everything you need to
know about context in React. from the
prop drilling problem we started with to
use context combining it with state and
now the flexible use API.
Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com use API for Context in React 19