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

JavaScript

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

JavaScript

import React, { useState } from "react"

Creating React Application

JavaScript

npx create-react-app foldername

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

JavaScript

cd foldername

Now, below is the implementation of useState,

JavaScript

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

JavaScript

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.

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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,

JavaScript

npm start

Hope you like this article.

Thanks.