use
use
is a new hook in React that has a few different use-cases.
Context
useContext
is deprecated in favor of use
so when we have a context that we are setting up, you’ll use
that context in a hook or component.
const SearchParamsContext = createContext<SearchParamsTuple | null>(null)
function SearchParamsProvider({ children }: { children: React.ReactNode }) {
// ...
return (
<SearchParamsContext value={searchParamsTuple}>
{children}
</SearchParamsContext>
)
}
function useSearchParams() {
const context = use(SearchParamsContext)
if (context === null) {
throw new Error('useSearchParams must be used within a SearchParamsProvider')
}
return context
}
Promises
use
can also resolve a promise. This is useful when you have a promise that is handed to a client component from the server. A good mental model for this is that use
throws the promise until it resolves behind the scenes.
const ServerComponent = async () => {
const result = fetch('https://api.example.com/data')
return <div><ClientComponent resultLoader={result} /></div>
}
const ClientComponent = ({resultLoader}: {resultLoader: Promise<any>}) => {
const result = use(resultLoader)
return <div>{result.data}</div>
}
Notes mentioning this note
There are no notes linking to this note.