React TypeScript Tutorial - 10 - useState Future Value

in the previous video we had a look at u-state hook with typescript we initialized you state with a simple boolean value and allowed typescript to infer the types for the state variable as well as the setter function in this video let's take a look at typing the use state hook when the initial value is only known at a future point in time for this example i have created another file inside the state folder the file name is user.tsx let me go over this user component code in the jsx we have two buttons login and log out whose handlers are to be defined once again we also have div tags which are supposed to render the logged in user's name and email address above the component i have defined the type of the logged in user it is an object with name and email as properties within the component i have also invoked the use statehook user is the state variable and set user is the setter function let us now finish this component and understand how to make it work with typescript when a user visits our website they are not logged in by default when that is the case a very common thing to do is initialize use state with null let's do the same we should also set the user state to null when the user logs out so in the handle log out function we call set user passing in null so far so good let's now define the login handler when the user clicks on the login button we want to set the name and email properties of course those values would be provided by the user but for our example let's hard code it so within handle login we're going to call set user and we pass in an object the object will contain name set to vishwas and email said to vishwas at example.com but as soon as we do that typescript is going to complain argument of type name colon string email colon string is not assignable to parameter of type set state action of null so what has happened here is that typescript has inferred the type of user to be null because of the initial value that we have specified so now when we try to assign a user object of type auth user typescript is not happy it is telling us hey you told me that the user is of type null so i cannot let you pass in a non-null value to the setter function so we need a way to pacify typescript and this is where we have to explicitly specify the type for the use date hook and not rely on type inference we specify the state type by including angle brackets after the ustate keyword so you state less than sign and greater than sign within this angle bracket we specify null but this pretty much is the same as type inference however we can also now tell typescript hey the type of user can be null or auth user and just like that typescript is happy once again to repeat what i just said we are informing typescript that user can either be null or auth user the initial value is null but in the future its value can be of type authuser with our type in place we can now bind the username and email so curly braces and when i type in user dot we get autocomplete for name when i select it though you can see that we have the optional chaining operator and this is because user can be null so only if user exists access the name property that is some typescript magic also if you try to get rid of this optional chaining typescript is going to complain again object is possibly null so you always have to check if the object exists before accessing its property same is the case with email curly braces user dot email our user component is now complete so this is pretty much how you type the use state hook whose value can be a different type compared to the initial value specify angle brackets and mention the type of the initial value as well as the future value in our case it is either auth user or null this is a very common pattern so make sure you have a good understanding of what we have done in this video thank you all for watching and if you're enjoying the content please make sure to hit the like button and subscribe to the channel i'll see you in the next one

Channel: Codevolution

Views: 1,715

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, useState Future Value, useState Future Value with React and TypeScript, React TypeScript Tutorial on useState Future Value

Id: LNpWuRUIR5A

Length: 6min 20sec (380 seconds)

Published: Sun Sep 12 2021