useState
Understanding the useState
Hook
The useState
hook (we will go deeper into hooks a un future lessons) is a function that lets you add React state to your functional components.
Here is a simple counter component that uses the useState
hook:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
In this example, useState
is called with the initial state as an argument (0
in our case). useState
returns a pair of values: the current state and a function that updates it. This is why we write const [count, setCount] = useState(0)
.
The setCount
function is used to update the state. When the user clicks the button, the click handler updates the state with the new count