React State and useState
State
In React, state is a data that is stored in the component.
It is used to store data that changes over time. For example,
if you want to store the number of times a button is clicked, you can use state.
useState
useState is a hook that lets us add a local state to our component.
Where is state data? It is stored in the component’s props.
Which means we can not refer state from other components. But we can call the function (Ex. Example()) to use the state.
Simple useState
useState has only one argument, and it’s the initial value of the state.
For example, the simple code below, useState has an argument 0. So variable ‘count’ has ‘0’ as initial value.
You can declare different names to the state variables by using array destructuring. ([count, setCount])
It’s very common to use ‘set’ as the name of the function that sets the state.
If the first argument is ‘name’, then the second argument is ‘setName’.
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Use useState multiple times in the same component
You can use useState multiple times in the same component.
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}