00:00so welcome back guys, today we are going to see what is useStateHook and how we use useStateHook
00:08and why we use useStateHook in every react application
00:13what benefits does useStateHook provide us
00:18in microservices applications, how does useStateHook provide us benefits
00:25what is useStateHook and how we use useStateHook in data
00:29today we are going to see all these things, so let's start
00:33music
00:48now what is state variable
00:50state variable is a desired value
00:55if i have made a counter from 0 to 1
00:59then the variable in which 0 was stored was a value variable
01:05and the variable in which 0 to 1 counter changed
01:12that variable is also a value variable
01:17it is called a state variable
01:20and along with it we have a state function
01:23we can keep any name
01:26but by convention the name which comes to us
01:29we say that the name of the variable comes and then we make a function
01:34but we start the name of the function from set
01:37and we write the first letter capital of the name of the variable
01:42this is a by convention, there is no need to follow on
01:47we can also change it with our need
01:50along with that we put an equal sign
01:53and useState which we have imported above
01:56we will use it here
01:58now here let's suppose we show this value here first
02:03we take a tag of h5 here
02:07and we show the state variable of value here
02:13here we have not seen any value
02:16because the initial value which we have
02:19we have not set it
02:22now we set the initial value
02:25inside the parentheses of useState
02:28we put the initial value let's call 0
02:31and now see that there will be some change on your browser screen
02:36see this
02:37we have set the initial value
02:40now along with that what we do
02:43we write this counter so that we get an overview
02:48now here we make two buttons
02:51we make a button of increment and a button of decrement
02:55which will change the state
02:57which will change the value which is available in the state variable
03:03I repeat again
03:05that the state which is the value here
03:08this is the state variable
03:10inside this we have 0 available as an initial value
03:14now here when we click on the increment button
03:19then our value will be plus 1
03:22and when we click on decrement then it will be minus 1
03:25now here we see how we get the value here
03:29here we use a button
03:33we use the tag of button
03:35and inside the tag of button we write increment
03:40music
03:50and here we use the event handler of onClick
03:55and here we will get this
03:58and along with that we will do this
04:00we have to use an arrow function
04:03now here what we do
04:05the set value which gives us the function useState
04:09inside that set value
04:11the value which is available now
04:14the value which is available now
04:16we make it plus 1
04:18and now let's see what changes we get on the browser screen
04:22here if I click on increment
04:25then its value will be 1
04:27and if I click on increment again
04:29then it will be 2
04:30and if I click on increment again
04:32then it will be 3
04:33now this value which is changing
04:35this is the state of our application
04:38this is the view which useState uses
04:43now here we make a button of decrement
04:48this is a tutorial
04:49let's recap a sum up
04:52that what we have learned about useState
04:58what we have learned about useState
05:00that useState is
05:02one data
05:03let's suppose the state we have
05:05that one data
05:07and the other data
05:09if we compare both the data
05:13and if both the data are not same
05:17then we can say that
05:19the state of our react app
05:23has changed
05:25now along with that
05:27if we tell that
05:28the state we have
05:30basically what is it
05:32we discussed that
05:34the data which changes from one time to another
05:38we call it the state of our application
05:41now along with that
05:42the third point which we discussed
05:44we discussed that
05:46the data which we have
05:47from where it can come
05:49and when it will change
05:51we have to see this thing
05:54in that we pointed out that
05:56the data which we have
05:58through API
05:59comes from backend
06:00let's suppose
06:01first the data came
06:03of 20 records
06:05after that the data came
06:07of 20 records
06:08but the 20 records
06:10which were previous records
06:11and the 20 records
06:12which came to me now
06:14means the data of 20 people
06:16came to me earlier
06:17and now the data of 20 people came
06:19both the data differ
06:21both the data are not same
06:23so we can say that
06:25the state of our react app
06:27has changed
06:29now on the fourth point
06:31we saw the syntax of useState
06:33so how do we write the syntax of useState
06:36first of all
06:37we have the arrays bracket
06:40and along with that
06:41we have a variable
06:43a set variable
06:45which shows the state
06:48that what is the state we have
06:50now along with that
06:51we have a function
06:53variable function
06:54state function
06:55which we call
06:56and by convention
06:58we start it from set
07:00and the variable which we have
07:02kept here
07:03the same variable comes here
07:05and the first letter
07:07of value V
07:09comes as capital
07:11now along with that
07:12we saw that
07:13how we change our state
07:16to change our state
07:18we trigger an event
07:20we trigger an event
07:22we run a function
07:24like we run the state function
07:26here
07:27in its parameters
07:28the value of our state
07:30the value of the variable
07:32in that value
07:33we put plus one
07:34so it will increment
07:36and if we put minus one
07:37in the decrement
07:38it will decrease to minus one
07:40so we have this simple
07:41basic beginner code
07:43that how we used useState
07:46now if you like this useState
07:49video
07:50kindly like, subscribe
07:51and share this video
07:53and do tell me
07:54in the comments
07:55that what is the difference
07:57between an expert level
07:58code of useState
07:59and a beginner level
08:00code of useState
08:01in the coming videos
08:02I will go through
08:03useState once again
08:05on an industrial level
08:07like our playlist is running
08:09on an industrial standard
08:11I will definitely tell that
08:12this was an overview
08:14in which we saw
08:15useState
08:16in a beginner state
08:18so let's see in the next video
Comments