React Deep Dive: cache

Frontend First

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React.

Topics include:

• 0:00 - Intro
• 2:29 - Caching in Next.js vs. React cache()
• 8:11 - Why React invalidates the cache for each server request
• 14:43 - How cache() enables colocation of data-fetching code
• 16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components
• 19:31 - Why cache() obviates the need for context in Server Components
• 23:19 - The danger of module scope on the server
• 27:54 - Why cache() is implemented with AsyncLocalStorage
• 41:04 - Why cache() is part of React
• 48:27 - Why Server Components don’t support cache()
• 53:04 - How cache() eliminates waterfalls

Links:

• Ryan’s YouTube video on React Cache