This Blog is about the Hooks introduction and about the useState(), like what it is and how it works...

Introduction...

React Hook is a special function that allows the components to use react features without writing the class components and They enable functional components to manage state, lifecycle methods, and other features..

Types of Hooks...

• useState()

• useEffect()

• useContext()

• useReducer()

• useCallback()

• useMemo()

These are few Primary Built-in hooks which are primarily used and a Devloper can create their own Hooks to encapsulate reusable logic in their applications. Custom Hooks Typically starts with the word use to follow the convection established by React's built-in hooks

Now, In this Blog I'm mainly focusing on the useState() Hooks which is widely used by the React Devloper's

useState() :

useState() is a React hook which creates a stateful variable and a setter function to update it's value in virtual DOM [name , setName]

Before using the useState() in the code we need to import it from the React library

import React ,{useState} from "react";

How to initialize the useState() ??

For this let's take an example....

function Click(){
    const [count,setCount] = useState(0);

    const updateCount = () =>{
        setCount(count+1)
    }
 return(
        <>
        <button onClick={updateCount}>Count</button>
        <p>Count : {count}</p>
        </>
    )
}
export default Click

This code dose that whenever we click on count button it increases the count value on the webpage..

const [count,setCount] = useState(0);
//count is the initial value;
//setCount is the statable variable i.e it changes the count value based 
//on the given condition;
//useState(0) it sets the initial value of count value to 0;

The output for this code is...

On every click on the button it increases the value of the count..

For this we see in previous code in the updateCount() function by adding too many line of setCount(count+1) we increament the count value by only once.

const updateCount = () =>{
        setCount(count+1)
        setCount(count+1)
        setCount(count+1)
        setCount(count+1)
    }

In this when we click button it will increament only once not four times because in four cases it will take the initial value of count will be 0 it will not change

To overcome this we need to assign it as arrow Functions because the setter function accepts the values or the callBack functions

const updateCount = () =>{
        setCount((count)=> count+1)
        setCount((count)=> count+1)
        setCount((count)=> count+1)
        setCount((count)=> count+1)   
    }

Now the count will increment by 4 on every click...

Like this we can practice many examples the one which i practiced is

Example

import Likes from "./like";
import "./App.css";

function App() {
  const jokes = [
    { 
      id: 1,
      text: "If you are Bad I'm your Dad",
    },
    {
      id: 2,
      text: "Dog Bite Slipper Shot",
    },
  ];
  return (
    <>
      <h1>Lame Jokes</h1>
      {jokes.map((joke) => (
        <Likes key={joke.id} id={joke.id} text={joke.text}/>
      ))}
    </>
  );
}

import { useState } from "react";

function Likes({ id, text }) {

  const [like, setLike] = useState(0);
  const [dislike, setDisLike] = useState(0);

  const likeButton = () => {
    setLike(like + 1);
  };
  const disLikeButton = () => {
    setDisLike(dislike + 1);
  };

  return (
    <>
      <p>{text}</p>
      <div className="reviews">
        <p>Likes : {like}</p>
        <p>Dislikes : {dislike}</p>
      </div>
      <button onClick={likeButton}>👍</button>
      <button onClick={disLikeButton}>👎 </button>
    </>
  );
}
export default Likes;

Here App.jsx is the main component which import the other components here it imports the like.jsx which contain the code

the output looks like...

Conclusion :

I found this blog helpful to people who are struggling to understand about the hooks and the useState() in react...

Note...

I'm not a teacher, I'm also a learner just like you and this is my first blog if there are any mistakes please kindly share with me and you can connect with me on Twitter, Github, linkedIn and Learn Together

Thanks for Reading this and Dedicating Time for This :-)...