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 (

Counter App to understand the useState Hook

{counter}

); } ``` ## 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 (

Counter App to understand the useState Hook

0

); } ``` 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 (

Counter App to understand the useState Hook

{counter}

); } ``` 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 (

Counter App to understand the useState Hook

{counter}

); } ``` 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 (

Counter App to understand the useState Hook

{counter}

); } ``` 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.

aminetech21

A Simple Tutorial on the useState Hook in React

Join Our Newsletter. No Spam, Only the good stuff.