React useState Hook
- A hook state is used to declare a state in React app. It uses useState() functional component for setting and retrieving state.
Import useState
- At the top of your component,
import { useState } from "react";
Initialize useState
- useState accepts the initial state and returns two values: The current state and a function that update the state.
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
Update State
import React, { useState } from "react";
function App(props) {
const [count, setRandomCount] =
useState(function generateRandomInteger() {
return Math.floor(Math.random() * 100);
});
function clickHandler(e) {
setRandomCount(Math.floor(Math.random() * 100));
}
return (
<div style={{margin: 'auto', width: 100, display: 'block'}}>
<h1> {count} </h1>
<p>
<button onClick={clickHandler}> Click </button>
</p>
</div>
);
}
export default App
- useState Hook can be used to keep track of numbers, strings, array objects, and any combination of these.
- Creating multiple state hooks:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
- Create a single hook that holds an object:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
