React Hooks: Making Function Components Stateful
Tags: react, javascript, webdev, beginners
Published: 2019-06-28 18:30:04

---
title: React Hooks: Making Function Components Stateful
published: true
description: using the useState hook to set and update local state in react function components
tags: react, javascript, webdev, beginners
---

React hooks let us use ("hook in to") React features such as state and lifecycle methods in function components. Before the hooks API was introduced to React, if we wanted a component to maintain some state, we would have to write it as a class component. 

While it is important to learn why and how things function in the language you are writing in, classes can initially create an unnecessary barrier to initial productivity or understanding of other concepts. For example, as a new react developer, you may gain an understanding of how state and events work in react, but then get tripped up by a bug because you don't have a solid understanding of how the [`this` keyword works.](https://dev.to/guin/tired-of-guessing-what-this-is-referring-to-3nfk)

In this post we will take a look at how the useState hook works to allow us to make function components stateful. 

## Using the useState Hook

In order to use the useState hook we first need to import it. After we import it we can use it to create some local state within a function component. 

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

function Example() {
...
}
```

`useState` takes one argument and returns a pair of values. The first in the pair of values is the current state value, and the second is a function that lets you update the value. React preserves this state between renders. 

In the example below `useState` returns a state variable `category` and a function `setCategory` that we can use to update the value of the category variable. The argument passed in is whatever you want the initial state to be and will only be used for the initial render. In the example we pass in the string `"Clothing"` as the argument. 


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

function Example() {
  const [category, setCategory] = useState("Clothing")
  return (
    <p>{category}</p>
  )
}
```

Unlike in class components, when we use `useState`, the value passed in as the argument does not have to be an object. We can pass in a string, a number, an object, null etc. We can also use `useState` multiple times to create different state variables. The function returned by `useState` is similar conceptually to calling `this.setState` in a class component. However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

### So we created some local state, how do we use and update it in our code? 

In the example below we have a function component `ProductListing` that has two calls to useState. Since the first item in the pair useState returns is just a variable with the initial value we provided as the argument, we can use this variable directly in our components jsx without having to write something like `this.state.category` as we do in class components. 

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

function ProductListing() {
  const [category, setCategory] = useState("Clothing")
  const [product, setProduct] = useState({"id" : 1, "name": "jeans"});

  return (
    <div>
      <h1>{category}</h1>
      <p>{product.name}</p>
    </div>
  );
}
```

Lets add an input that allows us to type in a category and update our category state variable. Our input has an event handler `handleCategoryChange` that uses the `setCategory` function to update the category state variable with the current value of the input. As we type we will see the category being updated in real time.  

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

function ProductListing() {
  const [category, setCategory] = useState("Clothing")
  const [product, setProduct] = useState({"id" : 1, "name": "jeans"});

  const handleCategoryChange = (e) => {
    setCategory(e.target.value)
  }

  return (
    <div>
      <input onChange={handleCategoryChange}/> 
      <h1>{category}</h1>
      <p>{product.name}</p>
    </div>
  );
}
```

However, i would like to reiterate that updating a state variable always replaces it instead of merging it as `this.setState` in a class does. If we wanted to update our product state variable and called setProduct with a different product object, we would be replacing the whole product object and not merging it with the previous one. This is a big part of the reason why we can have many different state variables. It is recommended to split state into multiple state variables based on which values tend to change together. You can read more about ways to think about this in the official react docs [here](https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables).

Hopefully you have come away with a better understanding of how the useState hook works to allow you to add local state to your function components! I would recommend reading through the react docs on the [useState hook](https://reactjs.org/docs/hooks-state.html) for a deeper dive! 

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!