Manage local state with useState hook
Published: 2021-06-04 12:17:44

{% youtube O6P86uwfdR0 %}*Video tutorial for this article*

Let's put into practice the concepts of state by using the useState hook to show and update information on the screen.

---

# Pre-requisites
[Destructuring](https://www.youtube.com/watch?v=UgEaJBz3bjY): Watch from the beginning when it mentions arrays until it mentions objects.

---

# Intended result

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnhvremd1usswuyapd7l.png) 
Figure 1: The components we will build, the one on the left without state and the one on the right with the state hook.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g5333gv02ruy75ndz9i.png)
Figure 2: The application hierarchy diagram.


---

# Type of React Hooks

React has many kinds of hooks, but today we will focus on the most basic yet most used scenario to keep the learning process simple.

The most common used React Hooks to manage different kinds of state:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc55wo8xrgi0l9xf7zqa.png)


This article will cover the first case, the `useState()` variable for local state management.

---

# Creating a useState() hook

To create a `useState()` state, follow these steps:

```jsx
import { useState } from "react";

export default function App() {
  const [state, setState] = useState(0);

  function increase() {
    setState(state + 1);
  }

  return (
    <div className="App">
      <p>Count {state}</p>
      <button onClick={increase}>Increase counter</button>
    </div>
  );
}
```

For now ignore, the button that calls a function, we will see it in greater detail on the article about buttons.

Let's analyze the code line by line:
1. `import {useState} from "react"` allows us to import the React Hook functionality.
1. `const [state, setState] = useState(0);` allows us to initialize the React Hook. 
  * The first value is the getter.
  * The second value is the setter.
  * Inside `useState()`, we put the initial value. 
1. `{state}` inside the JSX is used to call the getter and display the information on the screen.
1. `setState()`is used to call the setter and update the information on the screen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucvl4t8xm06j6arqywj0.png)

You can create hooks using strings, numbers, booleans, arrays, and objects.

Technically, it will allow you to use functions and classes, but those have some synchronization issues, so please stick with the basic data types mentioned above.

--- 

# Conclusion
By reading the theory article and practicing with the code example, it will be easy to understand how to use hooks.

Now we can move to the next article: [Button events in React](https://dev.to/softwaredevacademy/button-events-in-react-5cml), to learn how to use events to manipulate the page using buttons.

In you want to see a similar exercise, open this [link](https://github.com/softwaredevacademy/sda-react-articles) and open the branch state.

---

# Additional reading
* [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html): The official documentation of React covering state management. Ignore the components that use classes because they are obsolete and focus only on components that use functions.
* [Hook API Reference](https://reactjs.org/docs/hooks-reference.html): The official documentation of React covering the topic of React Hooks. Read it in case you want a in depth review of how hook works and more advance types of hooks.

---

# Credits
* Cover: Photo by <a href="https://unsplash.com/@mael_balland?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mael BALLAND</a> on <a href="/s/photos/hooks?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
* Video tutorial: [Learn useState In 15 Minutes - React Hooks Explained](https://www.youtube.com/watch?v=O6P86uwfdR0) by [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw).