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

i love you jack herrington

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.

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 👍🏻😂

@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; }

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

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?

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.

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

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

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.

yes please server also. you the man, jack!

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

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.

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

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.

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

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

Reselect works really great for memoization. 8:53

Love to see the server side fetch!

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

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!

There’s a cool vscod extension called „multiple cursor case preserve“ which does exactly what the name suggests 🎉

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

would be cool to see how to revalidate the cache

Very cool. Would be interesting to see a video that explains how to use this cache mechanism to create complex data (header + children) for preparing a create / update to remote database operation

Great server side handling too please. ! :)

We're in 2023. I can't believe frontend engineers are still struggling to fetch data from an API in a clean way from the browser.

Thank you for another premium video.

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!!!

such a nice approach! thanks so much Jack! would this work in plain React or just Next?

Great explainer Jack! Always love your content. 👏🏻

After this video, I started searching for SWR tutorials on youtube but there isn't any new ones with NextJS13. Can you please make a video for next13? that would be the best thing...

I'd like to see this working on the server.

16:13 I have been using the 'multiple cursor case prevent' extension for moments like these.

Thank U jack soo much for ur explanation and productiv contents

Definitely want to see how it works on the server

You can use the `useˋ hook in React server components, i think it is a better drop in replacement for async components that don’t work natively with typescript.

Thanks for the exploration! There's no better place to catch up with the daily breaking changes in the react community.

I get your point in this, we shouldn't have to do the work Lol, react framework should've handled that caching thing in the use hook by default

Another Amazing video, I really liked this. I've use Apollo Graphql and it does the same thing out of the box ( Caching ).

let'sss see it on the server! 🎩 Great video!

Clicked all the buttons. Thanks. Could be interesting if there is a proper way to invalidate the cache.

That's pretty cool ❤

Thanks for the great video explainer Jack. I was under the opinion that this hook has very little use and would eventually lead to boilerplate. As expected they had to add a cache function for it. What's a bit shocking for me is that every API that they add to react has an affinity for infinite loops. Yet they claim this is the perfect library for managing UI. 😅 So many footguns are introduced after hooks

Yup do the server version! great video!

🤯Nice, more content like this!!! 🙂

this video could have been 5 minutes but this guy keeps making funny jokes that only himself laughs.

Omg thank you for the dark mode !!!!!

Great job as always, Jack! I've been watching your videos for a while now, and this is my first comment. I have a question: What would happen if the data fetched was changed in real-time by another user? I plan on testing this on my machine when I get the chance, but I was just curious if you had already tested it yourself. Keep up the fantastic work!

Great video as always, Jack! So if I understand it correctly, 'memo' memoizes based on input props, but 'cache' additionally memoizes the result?

I'm very interested in this video. Thanks 🥰

18:20 I very much want to see the server side of this

To me, any cache has a progression of steps. Writing or setting a key is easy. Then you have to figure out how to refresh or invalidate. This is difficult (the meme). Many times time will be used when time is not really what we want. Then we start thinking in events. Then our app structure doesn't support this evented perspective easily. I need to write this up.

Please make the server use hooks video 🙏

I don't know or even think that this will be better than React Query.

Why did the url with the query param cause an infinite loop but not the url without it?

Very interesting, will try to use this instead.

If I hit the subscribe button again, I will unsubscribe. Love your videos and thanks for sharing your knowledge! Liked as always!

What about cache busting? Does it not have it?

But when using error handling with error.js like so if (status !== 200 ) { throw new Error('Error fetching organization'); } We get Error not implemented when used in client components

Great video as always React has been getting more and more tiresome for a long time by including more and more rules unnecessarily, but now it seems to be including even more exceptions than rules It presents 1000x ways to do something and none of them are satisfactory, in the end it is up to the community to take these tools and transform them into a minimally decent solution It's really exciting that React has gathered around itself creators of fantastic libraries (like the tanstack team for example) but it's really disappointing that it's not possible to create even a toy app satisfactorily using React without having to resort to a third-party library

use/cache look great! However, if we had to work with dynamically changed data (or user changes his/her first name) the fetch workaround would still return the old value.

Would be super cool to see how this works on the server. But I couldn't understand why we get an infinite loop just by passing a query param. I get the distinction between a function reference and its contents but all that changed was the query param, right? Am I missing something here?

Things are evolving really fast for a dev who's getting into react. I'm switching to svelte or vuejs

What's the actual use of "use"? Can it handle plain promises? What does when get other values? Is it some sort of state?

Not related to the video, can you share the settings & extensions you use in VS Code?

This is really cool. How will it compare against react-query or apollo's normalized cache?

I'm glad they're making these additions. I'm not 100% sure if this would work, but for lightweight revalidation, in fetchUser you could maybe do something like let func = cache((id:number)=>{...}) const revalidate = ()=>func = cache((id:number)=>{...}) return {func, revalidate} of course you'd probably want to extract the inner function somewhere outside of cache, this could even be a wrapper for any function you want to be able to revalidate. But long story short, this would just invalidate the entire cache, since in revalidate we just reassign the cached function to a new one. React query still seems way better for things, but if you don't want to bring it in for whatever reason, but absolutely need some form of revalidation, this would probably work.

I'm done with React creating a hook for everything. We as frontend developers are supposed to focus on Creating beautiful and engaging user experiences, but react is shifting our focus into all these unnecessary bullshit. I think it's time to move to Svelte.

Is "cache" essentially similar to or the same as other features in fetching libraries like Redux Toolkit Query?

@Jack Why types are complaining that cache not exists in react module? Is singleton pattern can replace cache function?

Is there any way we can do a "cache flush" after certain time?

i really hope when this is Outta experimental they also make useSwr automatically handle all of this on both client and server. while this is cool i really don't wanna think of how I'll need to handle my fetch requests based on if i call it on the client or server

This makes so much sense to me! These new APIs are awesome!

5:01 Question 1)Home gets rendered 2)A promise and then reference is created 3)use sees this change and sends a request to backend 4)data arrives after some time 5)Home renders the data AND that causes steps to begin from 1? Di I understand the problem correctly? 🤔

Great video Jack... you're my hero! Just one question, how can I invalidate the cache because of some mutation or something like that to force the network request again?

I always see this as a harder to *use* SWR. PD: Now make your devtools dark mode, sir.

Why not just wrap the promise with useMemo? Is cache redundant?

When is use and cache actually coming to react without next? I can't find any docs on this

When is the cache cleaned? Looks like a terrible memory leak. I am using mobx for years and I am pretty surprised how many strange solutions come up all the time that solve parts of the problems that mobx solves "magically"

Thanks Jack for the guide. Will this beat memo function in all cases?

What VS Code theme? BTW great video as always 👍

the react component life cycle is just the wrong abstraction, can we all move on already?

I still don't get it when people makes requests within a component. Why not to seperate concerns?

I mean why not use useQuery or SWR. These offer more capabilities.

Is there any documentation/link for this 'cache' feature ?

Why I don't have 'use' and 'cache' while using the same react and react types version with vite?

Nice video! But how donwe invalidate this data? Lets say i want this to be cached for 60 seconds and next visit should make fresh fetch.

If we edit User Cache will fetch again?

That’s very useful 😅

Yes intrested in cache with graphql

Server stuff please :)

If we have big data comes from server will browser slow application because of cached data.

Can you link to where in the documentation cache and use are explained?

I'll have to start calling you JsWizard at this point. Given your deep knowledge in the JavaScript Ecosystem, I wonder what would be your tools of preference for a social network application and why!? - Thanks in advance

Hi great video. I have a question. What if I want to refetch the cached data? How can I do that?

Hey I was trying to develope a website using next js and redux toolkit but I have no idea how to structure the project at all can make a video on project structure of enterprise level project structure for next , redux toolkit with material UI

Hey Jack, I can't seem to find docs on cache, how would one go about doing invalidation?

Wow great walk through on cache functionality. I am really wondering how useful would it be on server side. To be precise, cache returns the same data for same fetch function with same arguments by comparing it's ( value for primitive type and reference for non-primitive type ) right?. what if we send object ( body data ) as an argument. If such object come the component instead of from context , it would still make the fetch calls right?

I cant find `cache` in React docs! does anyone have a link to its docs?