No BS TS #25 - Typescript/React - useContext

We start off exploring global state management by having a look at useContext and how to properly use and type it.

00:00 Introduction
00:30 Project review
02:22 createContext
04:42 Creating the Provider
07:48 Using the Provider
08:51 Custom hooks with context
10:33 Consuming context
12:37 Outroduction

👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa

💢 Watch our other videos:

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

#typescript #NoBSTS #react

[Rindone]

I just wanted to say that I have been really enjoying these videos! Great refreshers. Could watch the series front to back multiple times over. Thank you and I hope you keep it up!

[JimmyGhelani]

Thank you for all your hard work putting these together. One of the best instructors i have ever come across - and I have seen a LOT of them!

[adamlerman]

Was just gonna comment for the algorithm but while I'm at it - just wanted to say that though I'm watching these videos in order to learn ts, I'm actually learning a lot about react as well - thanks Jack!

[sandycochrane]

When i first started working in typescript a few months back it might as well have been statically typed in wingdings. But now thanks to these tutorials it scans like 18pt Helvetica and by the time ive completed these tutorials im sure Typescript will feel as approachable as some windows 98 wiggly squiggly blue wordart

[yannicknana]

Yess It answers my question on an ongoing project ! Thank you

[Stoney_Eagle]

Since you asked 😄
So far I got 78.46% of 44702 in my typescript coverage report.

Typing can be realy difficult and I have some things that I just can't figure out yet, components are fairly simple compared to logic.

What you mean "Property 'email' does not exist on type 'KeycloakTokenParsed'" I know I do get it from the response so lets create an extendable interface and cast it.
Knowing this got me a bunch of steps closer.
I'll just keep chipping away jsx files to tsx till I got 99.9% 😎

[iuliancarnaru]

Great content, TS in 2021 is a must have skill.

[julianhahn]

Gotta give you a thumbs up, because you shared you code so well. I struggled with the constrained that i'm only allowed to call the dispatch hook from within a react function. In video you do not show the complete mangaer, but with your repo i was able to find the missnig wrapper function. Thanks!

[jakakrajnc]

Hey Jack absolutely love the content! <3

[bachirseghir]

React V 18.2.0

interface TodoProviderProps extends PropsWithChildren<{}> {
initialTodos: Todo[],
}

export const TodoProvider: = ({ initialTodos, children }) => (
<TodoContext.Provider
{children}
</TodoContext.Provider>
)

[victorlongon]

I would only add one thing. On those custom hooks i would throw an error if the hook is used outside the correct provider. Kent (Dodds) has a good article about it. Thanks for the video. I am going through the rest of the series i didn't had time to check before 😊

[moretimeproductions]

Took me a while to figure this out, but this video really helps, thank you sooo much! <3

[azzawi]

Great stuff Jack, I'm not sure why you extracted todos (list), addTodo & removeTodo into their own hooks, they could have been returned from one hook, to reduce extra declarations. imo... yet again, Great work :)

[kettenbach]

California could use an overhaul of state management. ☝️😀 Great video JH.

[stevenwoolston]

Love this content. Question about the duplicated component. Would the right hand side component write data back to the left hand component if you added a todo from that duplicated component?

[mattmarkus]

Hey Jack, if you had two list components that keep their own state of image objects (an array per component) and you need to access the state that each of those components is managing, could you track the state for both in a single context or would you need two? I have a single save button on a form and two image list component instances that aren't sharing state, yet I need to access the state of them on a click handler to make some api requests accordingly. Is there a context solution to this?

[codezero]

Is Redux a standard hook now? Via useReducer?

[mohsinwaseem]

Thank you for all your hard work putting these together. One of the best instructors i have ever come across - and I have seen a LOT of them!