React hooks: useState()
Tags: beginners, javascript, react
Published: 2023-07-02 20:58:47

## Introduction
State management is a core function that gives React the ability to build interactive and dynamic applications. By using hooks, React gives developers the ability to access and manage those states. In this blog, we’ll explain the useState() hook and provide an example of how to use it.

## What is useState()
In React, useState() is a built-in hook from the React library that gives you the power to add and manage state within a component. The useState() hook takes in an initial state and then returns two values.

```javascript
const [state, setState] = useState(initialstate)
```

## How to use useState()

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZnF5emtjeGo5dnlrdmFmNWFjOGt3dTByaW1iYWxxcW9qbmMybnpjeSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/p9xgbVrPOJ1PLRMDEv/giphy.gif">

Let's try building this counter app above:

The first thing we must do is import useState() from the React package:

```javascript
import React, { useState } from “react”
```

Below it, we can write the base of our component called "Counter": 
```javascript
import React, { useState } from “react”

 function Counter() {
  return (
    <div>
    </div>
  );
}
```
Now we need to initialize our state. We can do that by adding his line of code `const [count, setCount] = useState(0);` under the component:

```javascript
import React, { useState } from “react”

 function Counter() {
const [count, setCount] = useState(0);
  return (
    <div>
    </div>
  );
}
```


Next, we will need two functions. A function with the name of **increment()** to increase the counter and another function with the name of **decrement()** to decrease the counter:

```javascript
function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };
```
These functions will have the responsibility of updating the current state. Whenever **increment()** is called, we will call **setCount()** to update the current count by `+1` **OR** if **decrement()** is called we will call **setCount()** to update the current count by `-1`.

Lastly, we can add buttons for the user to interact with:
```javascript
return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
```
As shown in the code above, both buttons have an event listener called `onClick`. Whenever a button is clicked it will call the function that is inside of it. For example, when the `+` button is clicked, it will call on the **increment()** function and increase the count by 1; whenever the `-` button is clicked, it will call on the **decrement()** function and decrease the count by 1.

And that's it! Here is what our Counter component look like in its entirety:

```javascript
import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}
```

## Conclusion
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNmdidGpocDc4bGxscGMxYTR5Y3puMWtvNGE5MWljeTE0MTY1dTFxeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BiQ4TeIzGHka6xlg5h/giphy.gif">

There are many other ways to use the useState() hook and there are also many other hooks in React for developers to take advantage of. Whether it's to manage a state or make a counter app, the useState() hook is a very powerful tool to take your React projects to the next step. 

## Sources
{% embed https://www.geeksforgeeks.org/reactjs-usestate-hook/ %}
{% embed https://react.dev/reference/react/useState %}