React Context Has Changed (v19 Full Tutorial)

Coding in Flow Guide 11 months ago

Description

Learn context in React 19 with the new syntax and new use() hook. Understand when and why to use context to avoid prop drilling. Including industry best practices and sample code to practice on.

Starting code: https://github.com/codinginflow/react-19-context
Final code: https://github.com/codinginflow/react-19-context/tree/Final-code

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow

Timestamps:
0:00 - Intro
0:48 - Starting code setup
1:30 - The problem with prop drilling
5:22 - Basic context provider
11:23 - Nested context providers
14:01 - Auth provider
25:19 - Custom context hook
29:02 - Default value/SSR
33:05 - Conditionally calling use hook
37:38 - Outro & more resources