Will React's New Cache Fix Its 'Use' Hook?

Can React 18's new `cache` function save the `use` hook and give us the `use(fetch())` pattern that we didn't ask for and probably won't use instead of react-query or SWR?

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
1:21 Project Setup
2:50 Using The Use Hook
5:53 Trying Out Cache
8:39 Caching Fetch
10:22 Sharing The Cache
13:46 Bringing In Context
17:12 Architecting Around Cache
18:26 Summing Up
19:26 Outroduction

[TheSome]

@jherr 15:13 in this particular case the standart flow is to reogranize your useUserId like this:
const useUserId = () => {
const context = useContext(UserIdContext);
if (!context) {
throw new Error("Put your useUserId inside UserIDContext provider!");
}
return context;
}

[tasin]

I think if use hook implemented the conditional checking like rtk query, that would result in a much cleaner code. We could pass a null value to say don't fetch instead of having to add if blocks there.

[alexandru-gabrielmanea]

Thanks for always keeping us up to date with this stuff! Regarding the outro question: of course we would like to see you talk about the server side also 👍🏻😂

[shivamjhaa]

So nice to hear that this finally landed in React. It'll further help libraries like react-query.
At the moment, does React provide a way to invalidate the cache?

[gbjxc]

Great video! Very curious to learn more about what the cache invalidation story is, as you say at the end… obviously a great solution for static JSON data, not so great for any data that can become stale during the lifetime of a user’s session in the app. Thanks for your work.

[joseandkris]

I agree, React query and swr are gonna be go to used, but creators of these libraries will have these hooks to use and improve their performance, api, etc... :) So all in all, it's an awesome addition, even if we "users" don't use it to fetch client side.

[gabrieldl]

I'm interested in seeing this work on the server!

[chathulasampath]

This is great. But i think, for fetching SWR or React Query is much better as it uses SWR approach.

[Norfeldt]

so clear walk-through and thoughts in the wrap-up in the end 👏👌

[gmub]

Very nice explanation. Like it... I'm using RTK query and conditional call is better, ease and clean. Monorepo with separated store as a package is for me best option. For smaller project cache is solution to go.

[marouaniAymen]

I'd use react-query instead, because lot of what it was done is already implemented by this library.

[tonienguix]

yes please server also. you the man, jack!

[yashkhd]

Great job as always..Jack. I recently found ur channel and I must say ur content is very high quality. This is off the topic but it would be nice if you can create one video about how u keep track of all this tech updates.

[waliahmed]

Love it Jack... Please make a video for server side handling too. Your videos are best when it comes to logical problems.

[merlinni]

Definitely will be useful to see how it works with server components

[karsongrady]

Thanks, Jack. I would love the server side version of this video.

[gotxe]

Wow, React is turning into a mess, hope this "innovation" with use\cache will be either deprecated or used only by library builders that would decide to support RSC.
Anyway, thanks for the video, Jack!

[josephizang]

Jack, thank you. You are awesome. You have helped me get better with React. This is

[Jambajakumba]

Love this new addition to React. I've used useSWR for a while now and I'm super happy with it. If there are minor cases where I would opt for this, I don't see it right now. But great addition. Thank you Jack!!!

[thepromisebenard]

Awesome video Jack. I was just wondering the use hook behaved that way. Nice Vscode theme as well, what theme is that?