React State Hook Basics

Hye and Welcome to my very first post. I am also a beginner in react and just starting my journey. In this particular post, I wanted to explain briefly what I understood about react state hook and how you can use them in your react projects.

Firtsly, create your react app by using npx create-react-app``. Open the cmd and paste this code snippetnpx create-react-app`` and the name of the folder you want to build. For this example, I will name it beginner so the code will look like this npx create-react-app beginner then click enter in your keyboard. this will build you react app named beginner.

After loading, you will see this

then type in npm start to start the development server. next open the code editor of choice then open the file location of the react app created. now go to your App.js and delete all of the

What are Hooks ? Hooks allow you to separate stateful logic from a component so that it may be tested and reused independently. Hooks allow you to reuse stateful functionality without having to change the structure of your components. This makes it simple to distribute Hooks across many components or to the community.

suppose that we want to create a button to change the background color from white to black. we can use state hook to toggle the button. Firstly, import useState in the App.js so the code will look like this

import React, { useState } from 'react'

then, what we need to do is declare a new state variable like this

const [background,setBackground] = useState(false)

we set the initial state of the background to false and we can use setBackground set the new state of the background. The next thing to do is, create a handler to handle the state once it is clicked. the code will look like this

const backgroundHandler=()=>{
    setBackground(!background)
  }

and lastly in our App.js in the return(). we need to assign the background and create a button

 <div className={`App ${background?'black':'white'}`}>
      <button onClick={backgroundHandler}>
        change background
      </button>
    </div>

The next example is, suppose in a react component we wanted to make a counter that will increment by one every time it is clicked.

import React, { useState } from 'react';

function Example() {
  // Here we declare  a new state variable, which we'll call "count"
 //the initial value of count is 0 and is declared by adding 0 in the useState()
  const [count, setCount] = useState(0);

  return (
    <div>
//{count} the output value of count
      <p>You clicked {count} times</p>
//increments every time it is clicked
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The first thing you need to do is set the initial value of count to 0 by adding 0 in the useState(). count is the initial value and setCount is the updated value(setCount is setting the new count value) const [count, setCount] = useState(0);

then you can call count inside the return() to use it {count} the output value of count <p>You clicked {count} times</p>

next, you can update the count value by calling setCount <button onClick={() => setCount(count + 1)}> Click me </button>

So there you go, that is the basics of using state hooks in react.

React Hooks basics