React useState Hook

Today in this article I am going to explain one of the most important topic 'React useState Hook'.

Let's Begin,

Hooks were added to React in version 16.8.

The React useState Hook allows us to track state in a function component. State normally refers to records or properties that need to be monitored in an application.

Syntax

import { useState } from "react";

We initialize our state by means of calling useState in our function aspect.

useState accepts an initial state and returns 2 values,

• The current state.
• A function that update state.

Importing

import React, { useState } from "react"

Creating React Application

npx create-react-app foldername

After creating folder, move to it using the following command,

cd foldername

Now, below is the implementation of useState,

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteAnimal() {
  const [color, setAnimal] = useState("horse");

  return (
    <>
      <h1>My favorite animal is {animal}!</h1>
      <button
        type="button"
        onClick={() => setColor("lion")}
      >lion</button>
      <button
        type="button"
        onClick={() => setColor("tiger")}
      >tiger</button>
      <button
        type="button"
        onClick={() => setColor("monkey")}
      >monkey</button>
      <button
        type="button"
        onClick={() => setColor("donkey")}
      >donkey</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteAnimal/>);

Read State

We can include our state anywhere in our component now.

Example

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteAnimal() {
  const [animal, setAnimal] = useState("Lion");
  return <h1>My favorite animal is {animal}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteAnimal/>);

Update State

We use our state updater function to update our state.

Note
update state. Ex: animal= "tiger" is not allowed.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteAnimal() {
  const [animal, setAnimal] = useState("lion");
  return (
    <>
      <h1>My favorite animal is {animal}!</h1>
      <button
        type="button"
        onClick={() => setAnimal("tiger")}
      >tiger</button>
    </>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteAnimal/>);

What Can State Hold?

We can create multiple state Hooks to track individual values.

For example

create multiple hooks

import { useState } from "react";
import ReactDOM from "react-dom/client";

function truck() {
  const [brand, setBrand] = useState("Toyota");
  const [model, setModel] = useState("mini");
  const [year, setYear] = useState("2000");
  const [color, setColor] = useState("black");
  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<truck/>);

Another way, we can just use one state and include an object instead!

Example 

import { useState } from "react";
import ReactDOM from "react-dom/client";

function truck() {
  const [truck, setTruck] = useState({
    brand: "Toyota",
    model: "mini",
    year: "2000",
    color: "black"
  });
  return (
    <>
      <h1>My {truck.brand}</h1>
      <p>
        It is a {truck.color} {truck.model} from {truck.year}.
      </p>
    </>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<truck/>);

Updating Objects and Arrays in State

import { useState } from "react";
import ReactDOM from "react-dom/client";

function truck() {
  const [truck, setTruck] = useState({
    brand: "Toyota",
    model: "mini",
    year: "2000",
    color: "black"
  });
  const updateColor = () => {
    setTruck(previousState => {
      return { ...previousState, color: "blue" }
    });
  }
  return (
    <>
      <h1>My {truck.brand}</h1>
      <p>
        It is a {truck.color} {truck.model} from {truck.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<truck/>);

Step to Run Application,

npm start

Hope you like this article.

Thanks.