Hooks were added in React v16.8.0, which let you use state and other React features without writing a class😃.

In this article, we won’t be going into much detail about what a hook is. For that you can check out my blog on (Not sure what a “hook” is? Read this intro to hooks!) .👍🏾 Here we'll see how to leverage the built-in hook useState() to enable component functions to have a local state😄.

What is useState Hook?

This hook focuses on one specific thing. It allows you to add state to your function components.🤠 This means that you no longer have to work with class components. You also no longer have to convert function components to classes just so you can use state.

When creating a React app, we'll almost always need a way to store / manage state within our component(s) — the useState React Hook allows us to do this in a cleaner and more concise way😃.

It returns a pair → The current state and the function that lets you update it.

Syntax:🤷🏻‍♂️

import React,{useState} from 'react'
//inside any component function
const [name,setName] = useState('chhakuli')

When we declare a state variable with useState, it returns a pair — an array with two items. So, by writing square brackets we are doing array destructuring.

1. The first item is the current value which is chhakuli.
2. The second function is the one that lets you update the state (to change the value of the state).

Note: You can call the state as many times as you want.

Flow📝

• Accessing State:

<h1> Your name is {name} </h1>

• Updating State:

setName("another chhakuli")

What Does the useState Hook Do?🤔

The useState hook lets you add state to function components.

As stated previously, useState enables you to add state to function components. Calling React.useState inside a function component generates a single piece of state associated with that component.

Whereas the state in a class is always an object, with Hooks, the state can be any type. Each piece of state holds a single value, which can be an object, an array, a boolean, or any other type you can imagine.

How to use the useState Hook💥

There is nothing particularly special about useState, at the end of the day all we are doing is the following:

• Importing useState from React

• Destructuring useState — the first item will be the name of our state variable, the second item will be the name of the function that we use to update our state variable.

• We can name these whatever we want.

• Give our state an initial value by passing it to useState

Here is how we'd create code using functional components + React Hook useState:

// 1. Importing useState
import React, { useState } from 'react'

function App() {
  // 2. Destructuring useState
  // naming our: state variable 'count' & update function 'setCount'
  let [count, setCount] = useState(0);
  // 3. useState allows us to pass in the starting value, here it is 0

 // below we are:
 // - displaying count with {count}
 // - updating count with setCount when the button is clicked (more info below code)
  return (
    <div className="App">
        <p>You clicked {count} times</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click Me
            </button>
    </div>
  );
}

export default App;

So when should you use the useState Hook?🤔

It’s especially useful for local component state, but larger projects might require additional state management solutions😯.

The useState function is a built-in hook that can be imported from the react package. It allows you to add state to your functional components. Using the useState hook inside a function component, you can create a piece of state without switching to class components.

There are some differences between handling state in functions vs classes:

• In class components, the state is an object accessed using this.state; You simply add properties on this object to add an initial state and then use setState() to change it later.
• In function components using useState; the state is not necessarily an object. It can be an array, a number, a boolean or a string, etc.
• You can make multiple calls to useState in order to create a single piece of state with an initial value but also the function that's used to change that state later😉.

Conclusion 🙆‍♀️

The React useState hook can be very useful for managing state of component and even the whole application. It makes state management simple with only a small amount of code. I hope that this tutorial helped you 🤗 understand what the useState hook is about and how to use it in your React projects.

• In the next tutorial, we'll look at another useful built-in hook called useEffect until then stay tuned.

Thanks for reading!!!!👋