Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to use the Context API with React + Typescript. This tutorial provides examples with useContext, useReducer, and custom React hooks. The React Context API is your first step towards global state management.

Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Master the Coding Interview: https://bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

Course Updates https://courses.davegray.codes/

Questions - Please post them to my Discord https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

Playlist for this Typescript Course: http://bit.ly/3GcNJ78

Context API React + Typescript | useContext & useReducer Examples

(00:00) Intro
(00:08) Welcome
(00:30) Starter Code
(00:56) Extracting initial state & types
(03:52) useCounterContext hook & type
(08:27) Create Context with initial context state
(11:43) Context Provider
(16:32) useCallback
(18:07) Applying the Provider
(19:40) Custom hooks to deliver context

Corrections:
(12:42) Spreading the ...initState into the Provider parameters is not really necessary. It does help document but really just creates extra boilerplate. You can pull it in from the lexical scope of the Provider since both are defined in the same file. This will also eliminate the need to use the initState in the App component. initState will simply be passed to useCounterContext in the Provider value.

Suggested Pre-requisites for this Typescript course:
JavaScript for Beginners full course: https://youtu.be/EfAl9bwzVZk

React Hooks tutorials:
useState: https://youtu.be/yvTGXH7uybA
useEffect: https://youtu.be/j3vk0FW71DM
useCallback: https://youtu.be/FB_kOSHk1DM
useMemo: https://youtu.be/oR8gUi1LfWY
useRef: https://youtu.be/s6UAuFzL308
useReducer: https://youtu.be/26ogBZXeBwc
useContext: https://youtu.be/ngVvDegsAW8

Tutorial References:
TypeScript + React Cheatsheet: https://github.com/typescript-cheatsheets/react
React Official Website: https://reactjs.org/
Typescript Official Website: https://www.typescriptlang.org/
Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

Web Dev Tools:
Vite: https://vitejs.dev/
Chrome Browser: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Node.js & npm: https://nodejs.org/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Was this React Hooks + Typescript useContext / Context API tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#context #react #typescript