React's new cache function
Вставка
- Опубліковано 5 сер 2024
- In this video we're going to look at how React's cache function helps avoid unnecessary data requests.
- 0:00 - Intro
- 0:34 - Loading the current user
- 2:31 - Using React’s cache function
- 4:06 - Why not use props?
- 7:51 - Good things to know about cache
Preloading data with cache: • Preloading data (React...
Check out my course "Data fetching with React Server Components" here: buildui.com/courses/react-ser...
![ЛЕБЕДЕВ у ДУДЯ: муху не обманешь 😁 [Пародия]](http://i.ytimg.com/vi/E74h5fvVrqs/mqdefault.jpg)
So basically when RSC starts to render, wherever it finds the cached function first it stored the result and uses it down the tree. It basically happens on every request.
Yup, exactly!
Been watching your videos today and I have fallen in love with React again. Thank you.
Wow, that's great to hear! Love React!
Great step by step walkthrough. Thank you!
Thanks Delba!
Amazing definitely gonna use in my next project. Thanks and keep uploading videos like this ❤
Thank you!
This is crazyy 🔥
Nice!! I didn't get it at first when I read the article on BuildUI without watching the video yet, but now it makes complete sense. And with Next.js's default caching, it makes for a pretty effective combo. 😁
Glad it helped!
Cool
Clear explanation
Glad you liked it!
I am brand new to React but your explanation is very clear even to me.
Glad to hear that!
Thank you Ryan!
Love your content!❤ keep it up
Thanks!
subscribed and looking forward to more such videos...
Thank you!
I think Nextjs have integrated this cache by default. But they have also integrated extra 30 seconds cache on client side as well and without possibility to opt out of it. The 30 seconds client side cache makes it impossible to create Admin Dashboard with "live" data with only server components :(
Cool, thanks for sharing!
React's cache is built right into React, but Next.js also provides some additional caching features in addition to `cache()`. Next has a lot of caching: build cache, fetch cache, client side router cache, and then on top of it there's the React cache... it can be so confusing to know which-is-which!
I ran into the admin dashboard with live data problem a few months ago... Here's how I solved it: ua-cam.com/video/-t3-rG5G5tA/v-deo.html It's not pretty, but it seems to be working so far :)
Thanks for the comment, I love hearing about how people are using RSCs.
cant you export dynamic = 'force-dynamic'?
but why would you even want it to be a server component if data is always dynamic
@@ontanicolae1794 I dont want to expose fetched data to client. I want to return a ready HTML with latest data. The user doesnt need to know how and where do i get my data from. :)
@@ontanicolae1794
Exactly my thinking. The caching especially that server cache is supposed to help your static pages. How is a real time dashboard a static component. I may be wrong here, so sorry if I sound patronizing, it was not my intention. I just think that it's not that everything should be built only with RSC components now. We should use them where they make sense.
I hope you can help me with this:
when the unstable_cache from next becomes stable, both react and next cache wrappers will be imported as "cache"?
if so, whats the best practice there, in case you need to use both cache functions? Or is it better to use next's version? :c thank you
Good question!
I'm not sure about the naming. If I had to bet, one of them might get renamed... but we'll have to see. They're both unstable/canary APIs right now.
React's cache and Next's unstable_cache do different thins. React cache is per request, it's very short lived. Next's cache is shared across all requests, and can last until it is invalidated. So there are different situations when you'd want to use one over the other.
is it accessible in nextjs or does declaring a server function behave the same without react-cache
Hmm I'm not sure what you mean? Do you have an example in mind?
@@RyanToronto Ooh nevermind i have gotten my answer after doing my research
in nextJS, the fetch function is automatically cached, right?
I believe so. The Next fetch cache is a long lived cache that is shared between multiple requests to your application. React's cache() is a per-request cache that is only active for the current lifecycle of the request.
how did you do to make async functional components? I though that was impossible!
With React Server Components you can use async/await. These components only run on the server and have different features compared to regular React components... one of those features is they can use async/await.
Do caching libraries like react query do a similar thing?
Great question! Libraries like react-query do have their own caching mechanisms, but those libraries have a slightly different use case. Client side data fetching libraries (like react query) are meant to run in the browser and maintain a long lived client side cache. React's cache function is meant to be short lived and only run while rendering RSCs.
I have one query,
Then what's the benefit of using useCallback then in client
Sorry, I'm not quite sure I understand your question. If you only have one query, and it's only called once, then there's probably not much benefit to using cache.
Awesome! But, why is this cache function in the React package, and not some Next package, especially if "vanilla" react doesn't even use it?
Great question! Cache is in the main react package because it's useful for any React Server Component to use.
May be I am out of date, but can we use async with components ?
Yup! With React server components (currently in the canary version of React) you can run async components on the server. It's pretty awesome.
👍
hello Ryan, how can I use the cache function, I don't know how to get it from the React Canary. Great video by the way that's why I want to use it in my project.
The cache function is only available for React projects that use Server Components. If you're using RSC you can `import { cache } from "react";` and it will work. If you're not using RSC then cache is a no-op and doesn't do anything. Hopefully that helps!
@@RyanToronto hello Ryan, how do I know if I am using RSC? What is an example of a Server Components?
@@RyanToronto hello, it has something to do with the React Canary?
its experimental cache ? is it safe to use
It's in canary, but it's safe to use with React Server Components today.
@@RyanToronto any other alternative my goal is to read url params on deeply nested seever side component like use prams but down
what alternative for client server? t-t
Hmm, not quite sure what you mean. Do you have an example in mind?
@RyanToronto - this video is really timely because I’ve got a bunch of Prisma queries that aren’t cached.
That being said, how does caching work with parameters that can change?
Ex - a list of posts with each post component/card calling for views from the db
Great question! There will be different cache entries for each parameter, so if you have a cached getPost function and call getPost(1) and getPost(2), the function will run twice (once for parameter 1, and another time for parameter 2).
@ryantoronto but it wouldn’t invalidate the cache for Id 1, correct? so other references to the cached function could still benefit from cached value of id 1?
@@rushabhsheth08 Correct! No matter how many times you call getPost(1) it will always return the result from the first time. getPost(1) has it's own cache :)
in what world is 2s response on localhost acceptable?
FOR A HELLO WORLD
Seriously, couldn't you abstract that the "sleep" function Ryan added to his function was a simple snippet demonstrating some latency without needing to connect to a real database or call an external API? It is called "simplicity" ;)
but pretty much everyone is going to use a store anyways...