Lecture No 06: Mastering useState in React - The Complete Beginner's Guide
Welcome to Lecture No 06 in our React series! In this video, we’ll break down everything you need to know about the useState hook—the cornerstone of state management in React.
In this tutorial, you'll learn:
What useState is and why it's crucial for managing state in React components.
How to initialize state and update it efficiently.
Common pitfalls and best practices to avoid common mistakes.
Practical examples that show how useState can simplify your React development.
Whether you're just getting started with React or looking to solidify your understanding of state management, this video is designed for you. By the end of this lecture, you'll be confident in using useState to manage dynamic data in your React applications.
If you find this video helpful, don't forget to like, comment, and subscribe for more in-depth React tutorials!
Welcome to Lecture No 06 in our React series! In this video, we’ll break down everything you need to know about the useState hook—the cornerstone of state management in React.
In this tutorial, you'll learn:
What useState is and why it's crucial for managing state in React components.
How to initialize state and update it efficiently.
Common pitfalls and best practices to avoid common mistakes.
Practical examples that show how useState can simplify your React development.
Whether you're just getting started with React or looking to solidify your understanding of state management, this video is designed for you. By the end of this lecture, you'll be confident in using useState to manage dynamic data in your React applications.
If you find this video helpful, don't forget to like, comment, and subscribe for more in-depth React tutorials!
Category
📚
LearningTranscript
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