Hello and welcome to this video on React native.
Today we're going to be learning about useState.
If you're new to React Native,
you might be wondering what useState is and why you should use it.
Well, sit tight and let's dive in.
useState is a hook that lets you add state to your functional components.
It is an essential part of managing data
in React Native and allows you to manage state variables in your components.
React Native makes it to build mobile application.
But when it comes to managing data, it can be a bit tricky.
That's where useState comes in.
By using useState, you can manage state variables in your
components and make your application more dynamic and interactive.
Now let's see how we can use useState in a simple example.
So we have our Hello World application open in our editor
and I want to run this.
So I'm going to go to my terminal, then I'm going to go to desktop and I'm
going to go into the Hello World application project and I'm going to do
npx React Native run-ios, which should open this project in the iOS simulator.
So let's put the simulator here so that we see it.
It opened the Metro bundler.
I'm going to press I so that it shows up here.
And please don't close your Metro bundler otherwise the changes that we're going
to be making is not going to be visible here.
So here we see.
The only thing that this really does is displays Hello World.
But what we could do is use state to display this text.
So in order to use state,
you would have to import it from here, from React.
And then what you want to do is create a variable.
And the first thing that's going to go
here is going to be the variable that's going to be displayed.
So let's call it text.
And if you want to change this text later
when some user interaction happens, you can create set text.
And the initial value of useState is going to be defined inside here.
So if you pass nothing, this is going to return nothing as well.
So let's see this in action.
I'm just going to save this here and I'm
going to use this text variable inside here.
And to use the variable,
we're going to have to open the braces to let the React native know that we are
about to write some JavaScript expression inside here.
And then we're just going to use the text variable.
So if we were to save this now, we're going to see nothing.
Because our initial value was set to nothing.
This state is set to an empty state.
But if we were to pass Hello World here, we would see that this text would actually
have value and its value would be Hello World.
Now what if we want to change this text
on press of text here, we can set up an on press event handler
and we can say set text and here we can pass a new value.
Let's say hello world, I learned how to change state.
Let's save this.
And now if we were to click on this text
component we would see hello world, I learned how to change state.
So this is the simplest example for how to use states.
And useStates are an essential tool for managing data in react native.
It allows you to create state variables
that can be updated and used in your components.
And with useState you can build dynamic
and interactive applications that are more engaging for your users.
There's a lot more that you can achieve with useState such as updating multiple
state variables using the previous state value and more.
So get started with useState today
and build amazing applications with React native.
Thanks so much for watching.
In the the next video we are going to be covering what use effect is.