This is the simplest tutorial to get you started with the useState hook.
We'll use a calculator app as an example.
Here's the final code:
import "./styles.css";
import {useState} from 'react'
export default function App() {
const [counter, setCounter] = useState(0)
const handleIncrement = () => {
setCounter(counter +1)
}
const handleDecrement = () => {
if(counter > 0) {
setCounter(counter -1)
}
}
return (
<div className="App">
<h1>Counter App to understand the useState Hook</h1>
<h2>{counter}</h2>
<button onClick={handleIncrement}>increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
What is the useState hook ?
The official definition from the React documentation is: "a React Hook that lets you add a state variable to your component." In simpler terms, it's a variable that will make your component re-render (reload) when its value changes.
How to use it?
First let's start with a simple component with a title, a counter, and increment and decrement buttons.
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Counter App to understand the useState Hook</h1>
<h2>0</h2>
<button>increment</button>
<button>Decrement</button>
</div>
);
}
We then import the useState hook and call it at the top of the component to declare a state variable:
import "./styles.css";
import {useState} from 'react'
export default function App() {
const [counter, setCounter] = useState(0)
return (
// ...
}
Here we called our state variables, [counter, setCounter], where counter will hold the state value, and setCounter will be the function to update this value. We also assign an initial state value, useState(0), but it can accept other types, like strings, booleans, or more.
Now we'll make a function called handleIncrement and assign it to the "onClick" event of the Increment button that will trigger the function each time the button is clicked. We will also remove the hard coded value inside the h2 tag and replace it with {counter}.
// ...
export default function App() {
const [counter, setCounter] = useState(0)
const handleIncrement = () => {
setCounter(counter +1)
}
return (
<div className="App">
<h1>Counter App to understand the useState Hook</h1>
<h2>{counter}</h2>
<button onClick={handleIncrement}>increment</button>
<button>Decrement</button>
</div>
);
}
As you can see we didn't increment the counter by writing counter = counter + 1 like a regular variable in Javascript but we used setCounter(counter + 1) which is the only way you can change the value of a state variable.
Let's also add a decrement function.
import "./styles.css";
import {useState} from 'react'
export default function App() {
const [counter, setCounter] = useState(0)
const handleIncrement = () => {
setCounter(counter +1)
}
const handleDecrement = () => {
setCounter(counter -1)
}
return (
<div className="App">
<h1>Counter App to understand the useState Hook</h1>
<h2>{counter}</h2>
<button onClick={handleIncrement}>increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
Finally, we'll add an if statement in our handleDecrement function to prevent the counter from being a negative value.
import "./styles.css";
import {useState} from 'react'
export default function App() {
const [counter, setCounter] = useState(0)
const handleIncrement = () => {
setCounter(counter +1)
}
const handleDecrement = () => {
if(counter > 0) {
setCounter(counter -1)
}
}
return (
<div className="App">
<h1>Counter App to understand the useState Hook</h1>
<h2>{counter}</h2>
<button onClick={handleIncrement}>increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
If there are no errors than congrats! you have officially learned the most important and most used React hook.
This wraps up our tutorial! but don't get too excited because now you'll need to practice until you master it.
SOCIAL SHARE CARD GENERATOR