React useState Hook.

Hi readers, Welcome to my first post here on Hashnode. I am Abolarinwa, and I am here to explain the useState hook in react.

React is a Javascript library which was created by Facebook in 2012. It was made available to the public in 2013. React projects are broken down into components and each component does something specific to it.

React components are either class based or functional based. Hooks can only be used in functional components.

What are Hooks?

React Hooks are basically functions that allows to implement states and other react features without having to write a class. It eradicates the need for using class based components which was the initial way of writing react components. With hooks, our components can basically be written as functions and we'd be able to implement everything possible in a class based component.

The useState Hook.

The useState hook is the most basic and the most commonly used hook in react. The useState hook is used to declare a state in react functional component. A state is a built in react object that is used to store information that belongs to a component. What the useState hook does is that it allows us to set a state and track it value in a functional component. Enough of the theory, let us get into coding aspect. I will be creating a basic count state with two buttons that allows us to increment and decrement the value of the count state.

The first thing we have to do to be able to use the useState hook is to import it

import React, {useState} from 'react';

The above line is required to be able to use the useState hook in our react application The reason why useState is destructured is because it is a named export. Then we initialize our state as shown below

   const counter = () => {
      const [count, setCount] = useState(0)
}

The counter function is a component in react. The count is the state we are trying to set and the setCount is a function that can be used to modify the content of the state(count). The count state is set to an initial value of 1. To see the value of our count state, we log count to the console. The updated code looks like below:

const counter = () => {
    const [count, setCount] = useState(1);
    console.log(count); // prints 1
    return (
        <div >
           <p>{count}</p>
        </div>
      );
}

We will now create 2 buttons that either increment or decrement the value of the count state. The updated code is as below:

    import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(1);
  console.log(count);
  return (
    <div>
      <h1>Learning usestate hook</h1>
      <p>{count}</p>
      <button>Increment</button> <br /> <br />
      <button>Decrement</button>
    </div>
  );
};

export default Counter;

The buttons have no functionality yet, but we will implement them so they can work now. We will be using the setCount function to do that. First, let us create different functions to handle the decrement and increment respectively. Our new code will look something like this:

    import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(1);
  console.log(count);

  const handleIncrement = () => {

  }

  const handleDecrement = () => {

  }
  return (
    <div className="App">
      <h1>Learning usestate hook</h1>
      <p>{count}</p>
      <button onClick={handleIncrement}>Increment</button> <br /> <br />
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};
export default Counter;

The functions do nothing for now but the next step will be to actually implement the functions Our final code after implementing the functions handleIncrement and handleDecrement will look like below:

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(1);
  console.log(count);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };
  return (
    <div className="App">
      <h1>Learning usestate hook</h1>
      <p>{count}</p>
      <button onClick={handleIncrement}>Increment</button> <br /> <br />
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

As it can be seen above, the setCount function is what is used in modifying the state, cool right?. This is pretty much everything basic about the React useState hook. Note: React useState hook does not only accept integer(number) datatypes. The accept all datatypes ranging from strings to arrays and objects.

Below is the codepen for this tutorial:

This is a basic introduction to the useState hook. I will be making a tutorial on the more advance feature of the useState hook soon. I hope you enjoy reading this as much as I enjoy writing it. Thank you for reading.😉