React is a very powerful JavaScript library, I'm sure everyone will agree right? One of the most advantageous aspects of React is the ability to re-render part of your UI based on some state that you hold values in.
I'm going to show you here in a few simple tutorial-like steps how to implement the useState hook into your React app. If you'd prefer to learn via video, I actually have a YouTube video explaining this as well.
Step 1
If you haven't already got a React project up and running you can spin one up quite easily using the npx command:
npx create-react-app my-app
This will create a project called my-app inside the directory you're currently in, on your CLI, using the create-react-app utility.
If you already have a project, you can skip this step.
Step 2
Let's create a new page or component for this little example. We'll be creating a functional component for this case, as hooks can only be used within functional components and not class-based components.
import React from "react";
const MyComponent = () => {
return (
<h1>My Component</h1>
);
}
export default MyComponent;
This is a very simple component which, at the minute only renders a heading tag saying "My Component". However, this is the perfect basis to implement the useState hook and get familiar with it, without much bloated code to distract you.
Step 3
We need to import the useState hook method from react. This is a method which can basically take in a default value and gives you back a variable, and a set method for that variable to override or re-set the value it's holding.
import React, { useState } from "react";
Step 4
We need to somehow use this hook method now. We can set out a state variable inside our component, anywhere before our return like this:
const [ myVariable, setMyVariable ] = useState("Hello");
What have we done here?
We have a variable called myVariable which holds an initial or default value of "Hello", quite like writing:
const myVariable = "Hello";
We also have a set method now, which we can use to update the value held in our state variable and call it just like we'd call a regular function, like:
setMyVariable("Goodbye");
With our state variable and set method pair set up, we can use our state variable in a number of ways:
- As a condition, to render a piece of UI in our return
- To simply output the value of the state variable
- Pass this state variable as a prop into a child component
With that being said, let's see how we can achieve these 3 things.
Using our state variable as a condition to render a piece of UI in our return
return (
{ myVariable === "Helllo" ? <h1>Welcome to My Component!</h1> : <h1>Goodbye, Hope you enjoyed My Component.</h1>
);
How you write your ternary operators in your JSX, is obviously up to you.
To simply output the value of the state variable
return (
<h1>{ myVariable }, there!</h1>
);
Pass this state variable as a prop into a child component
return (
<MyChildComponent variable={ myVariable } />
);
Now, what about our set method, how can we use this? Well, it's quite simple, as I said above, we can use this set method (or function) just like any regular javascript function.
- Let's add a button into our simple React component to demonstrate this.
import React, { useState } from "react";
const MyComponent = () => {
const [ myVariable, setMyVariable ] = useState("Hello");
return (
<div>
<h1>{ MyVariable } friend!</h1>
<button onClick={ () => setMyVariable("Goodbye") }>Set Variable</button>
</div>
);
}
export default MyComponent;
This will basically call the setMyVariable function and pass in a value to update the state with, because we are outputting the state variable value in our h1 tag, and we know that a change in state promotes a UI re-render of affected elements, we now know that the value held within the h1 tags will change to Goodbye friend.
I hope this helped you understand the useState hook in React. It really is very simple once you grasp how to use it and what you can do with it.
Again, if you'd prefer the video format i have a YouTube video as well.
Don't forget to head over to my YouTube, I'd love to see you there, where I'm posting coding tutorials, all to do with JavaScript, React and more coming!
