React TypeScript Tutorial - 9 - useState Hook

welcome back everyone over the past few videos we learned how to type some of the common props passed into a component now it's time to focus on typing hooks and we are going to start with the use state hook in this video in the components folder i have created a new folder called state within this folder i've created a file called loggedin.tsx let me go over the component code in the jsx we have two buttons login and logout whose click handlers are to be defined we also have a div tag which is supposed to render whether the user is logged in or logged out since we have data that can change what we need is a state variable so let's make use of the use state hook and see how to manage its types step 1 import the use state hub so import use state from react step two create a logged in state variable whose initial value is false so you state is logged in the setter function is set is logged in and the initial value is false step three conditionally render the text inside the div tag so user is logged in render the text logged in else render the text logged out so this condition is based on the ease logged in state variable now for step four we define the handler functions inside handle log in we're going to call set is logged in and pass it true similarly inside handle logout call set is logged in and pass in false and believe it or not this is our fully functional component and we got it done without having to write a single line of typescript code you might be thinking is this actually working so let me prove it to you on is logged in let's say we try to access dot length like we would on a string data type we get the error property length does not exist on type boolean and if we try to pass in a value to set is logged in which is not boolean for example 0 instead of false we still get an error in plain javascript 0 is treated as a falsely value but typescript doesn't let us do that as you can see but how exactly is this working well it is because of type inference once again typescript is smart enough to infer what the state variable type is based on the initial value we pass in when we passed in false as initial value typescript inferred that is logged in is always of type boolean which in turn infers that only boolean values can be passed in as an argument to the setter function you can see the types inferred by hovering over the returned values is logged in as boolean and set is logged in is a slightly more complicated type offered by the react library the type is react dot dispatch react dot set state action of type boolean now i can probably say that half the time you don't really have to explicitly type the use state hook type inference will take care of everything for simple values but what about more complex types and what if we don't know the value of the state variable initially but it can have a value in the future let's take a look at that in the next video

Channel: Codevolution

Views: 1,546

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 Hook, useState Hook with React and TypeScript, React TypeScript Tutorial on useState Hook

Id: 2NKNjeB0WVs

Length: 4min 35sec (275 seconds)

Published: Sun Sep 12 2021