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.