Type useContext : React and TypeScript
TypeScript and React sometimes need a helping hand so they can play ball well together. Getting proper type-safety when dealing with the Context API is rather tricky with some quite nasty pitfalls that can be time-consuming. In this video I'll show you how to achieve what you need to get the compiler happy and satisfied! ⚡️
💯 type-safety
no hacks 🔥
📽 Chapters
0:09 What is the Context API? 🧐
2:45 Starting with some CSS 🎨
6:05 Creating components 🏗
7:35 Add new components to App.tsx 📦
8:05 More CSS: index.css base styles 🖼
8:30 Create context.tsx 🧭
10:49 using Context with a Custom Hook for better Developer Experience 🪝
11:52 first types for our Context ⚙️
13:47 Add useContext on App.tsx ⚡️
14:18 Add Context.Provider to index.tsx 🖇
14:47 Passing Context provided props to different components 🎁
15:10 Strong-Type consumer components 🔒
15:54 Strong-Type React.createContext call 💥
16:33 Adding the click handlers! 🙈