What is state in React?

State is a JavaScript (JS) object with superpowers that lives inside a component. React will automatically track any state object, and we can change this value. React will then re render that specific component, without touching others components.

Creating a state object

Inside our component, we start by importing a built-in hook/component (or you can call it a special type of function) from React. This is the hook we will use to create our state. Like this:

// App.js
import { useState } from "react";

This is how we import hook/components into our own component. Now, we are able to use this hook. Let's try it out.

// App.js
import { useState } from "react";

const stateObject = useState();
console.log(stateObject);

This is how we use the useState hook. The useState hook is a component that returns an array. Here, we store that array inside our stateObject variable. If we console.log this array, we can see that we get two items:

What does useState return?

1. An item that is undefined. This is the value that our state holds. It can be any kind of JS value, like string, number, boolean, an object, an array or a function. We will use this value somewhere in our code, and when we choose to update the state, React will automaticly update and rerender the component that uses this state with the updated value. Keep in mind, only the component that uses this state will be updatet and rerendered.

2. The function we use to update the state value.

Destructuring

When we write JS (especially React) we like to destructure and make the code cleaner. Let’s do that when we call useState:

// App.js
import { useState } from "react";

const [name, setName] = useState(“Missing name”);
console.log(stateObject);

In that example, we made 2 changes. Let’s break them both down:

The first part, deconstructing:

// App.js 

const [name, setName]

As stated before, useState returns 2 item in an array. This is the ES6 JS way of deconstructing arrays.

• The first item, which is the state value, we call name. This should describe the purpose of the value. Here, “name” will include the users name.

• The second item, setName, is the function we call when we want to update the state value. The naming convention here is to call the first part of the word “set”, and the next part is the same as the state value name.

For example:

• age, setAge
• user, setUser
• modalOpen, setModalOpen

Second part, initial value:

// App.js 

useState(“Missing name”);

The last part here is the “Missing name” string. This is the initial value that the state will have. This means, when the application loads, this will read “Missing name”. But when the user enters his name, and we update the state with setName, the name will be updated.

Why do we use state?

We use state in React for several reasons.

• As stated before, when a state value inside a component is updated, only that component is is re rendered, which makes our website feel fast.
• The ability of having state contained in a component, makes creating code splitting much easier. Not only can we create UI components. We can make components with their own state and logic, and reusability becomes easy (custom hooks). Some examples:
  • Media query components: A component that tracks the viewport.
  • Fetching components: A component that fetches data from a source asynchronously. When the fetching is done, we will know.
  • Login in component: A component that starts when a user enters the website. If the login is successful, we can update the website.

Rules of state

• State can ONLY be updated/changed with the setState function.
• setState is asynchronous.
• We use state when you have data that can change.
• You can have multiple state values in a component.
• State is just a JavaScript object.