Context API React + Typescript | useContext & useReducer Examples

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:

👇 Follow Me On Social Media:

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:

📚 React Hooks tutorials:

📚 Tutorial References:

⚙ Web Dev Tools:

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

[jameshalstead]

I just want to say thank you, thank you for your time making these videos, thank you for explaining things so well, thank you for your positive words. More than 1x have I watched just the end of your videos to hear your catchphrase of striving for progress not profection, a little bit of progress each day can go a very long ways. I don't know if you understand how good those words sound to a newbie/junior with imposter syndrome but I do appreciate you and your videos. Thank you for everything

[lukasz_mroz]

I am professionally coding for 15 years. I've been a software engineer, a team lead and an architect already. Recently joined team with big projects in fact. For a computer science guy using C, C++, Clojure, Java, python, flutter/dart, JS/Vue/angular I have to say this video is ideal to expose the pain of react boiler plate code to have a such simple component as input count with 3 functions.
I'm down after realising how aweful react design is. Encapsulation gone wrong. State, context, Providers and HTMLInputElement dancing together. I really like the smart and dumb components concept from Angular experience.
Now I feel the pain of my team, having to maintain the project with corrupted structure with state leaking all over. Adding single button alters 8 files already. React Devs, this is counter art of programming. That's not gonna defend on the market in the longer run.

[JoeTheGetItGuy]

Merry Christmas to Dave and your families!

[codie]

no joke useContext can get a little complicated in typescript

[chloeturner]

Dude you put this video out at just the right time, i'm struggling with using reducers and contexts together, so thank you very much and have a really nice xmas :)

[KristianTheDesigner]

This was a tough one :D i even forgot to add the () to the custom hooks there at the end. fortunately solved the issue quite quickly, but still..gonna need some practice with this one for sure.

[JustSkillGG]

Awesome content as always.
I would prefer the video to be a little bit more zoomed out though. Just one or two "Ctr + -.", in order to be able to see bigger code chunks of the screen.

Keep it up Dave! 500K is coming soon

[alberttoo]

Thanks so much for you videos are getting me through my undergraduate💯.

[gulinatayier]

Thank you for the video! Really helpful! In my application, I want the initial state to be fetched data or even from the redux, where should be a good place to feed into this code?

[Meysam]

Hi Dave Thanks, perfect
please start tutorial nextjs with projects

[queerly__coded]

I feel like even though we 'cleaned up' our component, the context provider is an absolute mine field now. I watched this as a refresher to the concepts around context api and found it difficult to keep adding more and more code to a single file and follow along conceptually. I also wonder if you turn off strict mode when you're doing these? I find nearly all of your content to be (chefs kiss) but this one was a struggle bus for me. All that said, I am in fact refreshed on the idea of the context api. Thanks.

[big-jo]

why did you export the initState even so it's already in the same context file? I mean you could just pass it to the CounterProvider value directly like here the initState is the actual object not the spread-ed parameter (...initState) and now you don't need to import the state object when using the CounterProvider in the App component? I'm so curious about that 🤔

[haikalalselwi]

Hello Dave, thanks for this series
I have question , how to use dispatch in function out of context. I get an error cannot use hook outside of function

[sumanthprabhu]

Typescript makes context very complicated and lot of code 😢 and this is just for a simple counter component

[Grishopping]

Gracias Dave por tus videos.. .... jajajaja en Español para ver si me entiendez Feliz Navidad Hermano saludos desde Venezuela tu amigo Jose Grillo

[ThanHtutZaw]

I have misunderstanding, I want to ask why use custom hook with context. If we use custom hook, I think we don't need context anymore .And If we use context why not use directly in our component .

[vaibhavshukla]

Sir could you please provide me the documentation wehre we learn more about react and typescript.. please

[AB-oucw]

Hello sir, I want links to get React, Angular Js

[-manikandan]

Sir put angular videos sir please i am starting to learn in angular because my project is angular so you angular video sir please 🙏🙏🙏