Mastering Typescript State Management using just React

Continuing on with Typescript we are starting a series on React state management where we take the same To-Do list and implement it using a bunch of different state managers. And to kick that off we are looking at using just the React basics to start; useState, useContext and createContext.

00:00 Introduction
00:56 Creating the project
02:54 useState
15:25 useContext
22:33 Custom Hook
30:47 Outroduction

Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button for stay connected with this channel.

#reactjs #typescript

[chandruskc]

You are the only person who teach things about React in Typescript. Thank you!

[king-manu]

This channel is pure gold. I'm recommending this to everyone I know.

[penry]

Wow this is such a fantastic channel. So glad the YouTube algorithm recommended it to me! Keep up the great work Jack!

[learningit]

I am beginer, and for me this videos so helpful! Thanks for your passion

[eleah]

Hi Jherr, you manage to cover things I'm most interested in and behind on. Thanks.

[RossOlsonDotCom]

Great stuff. I particularly liked building it wrong... then stripping that out... while putting in the good stuff. Great context for 'context'.

[bythealphabet]

good video, thank you Jack
nice way to Convert into Typescript.

[Shakeel]

Really really nice explanation of React hooks. Really helpful. Thanks so much, Jack.

[viveksharmapoudel]

great channel Sir...your videos are so underrated for they offer so much value yet so unknown among programmers.

[sandycochrane]

Since I started learning React with Typescript I generally find myself wanting to smash my laptop at least several times a day

You are actually a hero for taking the time to explain this so clearly in a really logical progression through the complexity... and also additional thanks for delivering it with such a positive vibe. Surprisingly makes quite a difference in reducing the urge to throw a rage quit tantrum.

I would describe this as the filet-mignon of React Typescript State Management tutorials

[wellingtonm]

Hello there sir. I just found your channel and I really liked your content. Thanks very much for your teachings. You explain things very clearly. I was think if you could make a series on nextjs with typescript. Thanks a lot again!

[jasonsebring]

The only downside I see here is having to wrap multiple providers... over doing say pub/sub singleton approach. I do the latter but wrap it with useGlobalState type approach or HOC. This was a well done presentation.

[Norfeldt]

You put a bang after useContext because it can be null and mention quickly something about "coerced". Having seen this before in JS, is this a typescript thing and can you ref or eleborate on what it does?

[dot_fury]

Thanks for the great video, I learned a lot. I just have one question that was confusing me. At the end when you create the custom hook, in the helper methods (addTodo, etc.) You use `tl` ex. setTodos(tl => addTodo(tl, newTodo));

I noticed `tl` wasn't declared anywhere and assumed that useState set functions invoke with the state variable automatically? I didn't see anything in the React docs about that from what I can tell. Just has me scratching my head.

[bojanchurlinov]

Thanks Jack, awesome content... as usual :)

[samfreeman]

Hey! Thank you for this tutorial. I am. *just* learning TS and therefore am struggling to troubleshoot. I am console logging the current todos and it seems like done isn't changing to true for me. Any thoughts?

[georgy]

I am beginner in typescript, but I found this lecture (especially the part with custom hooks) to be quite difficult to understand. I can see that the material is top notch, I just wish, it would be more “accessible” to beginners. Like explaining why we add callback functions to methods in our return statement, etc.

[edgarcalderon]

Solid Content Jack, is there anyway to do useContext with using class based components rather than function based components?

[robovirtuoso]

I recently embarked on a no-libraries React state management in TypeScript, actually inspired by this video. But... few days ago I discovered something in Hacker News.... a lib aptly called "Simpler State", so far it's looking super simple to me. My library-less React TS app suddenly got shorter, feels like Context API without providers.

[mattmarkus]

I really enjoyed your videos on custom hooks and using context! Your channel is unique and goes beyond the norm, which is much appreciated. But I found myself wishing that you had used an item that's a little bigger than a todo (eg, an employee, or customer - something with more fields). I ask because I have a project I'm working on that has a screen with multiple tabs and item data on each one- and I really want to find an elegant solution to the state part of it. My screen only has 7 fields at the moment and the change handlers on the text fields alone are making things way too busy for one file (ie, prop drilling). Can you put the change handlers that set new state on every keystroke in a different file/hook and import those instead of having them in the file that renders the input fields? I know that something similar to your custom hooks with context must be the answer, but I can't quite map the todo example to mine.