React: Managing state

Every React component can have its own state.

What do we mean by state? The state is the set of data that is managed by the component.

Think about a form, for example. Each individual input element of the form is responsible for managing its state: what is written inside it.

A button is responsible for knowing if it’s being clicked, or not. If it’s on focus.

A link is responsible for knowing if the mouse is hovering over it.

In React, or in any other components-based framework/library, all our applications are based and make heavy use of components state.

We manage the state using the useState utility provided by React. It’s technically a hook (you don’t need to know the details of hooks right now, but that’s what it is).

You import useState from React in this way:

import { useState } from 'react'

Calling useState(), you will get back: a new state variable, and a function that we can call to alter its value.

useState() accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state.

Here’s an example of how to use useState():

const [count, setCount] = useState(0)

useState() returns an array. The above construct uses a special syntax called array destructuring which we’ll use all the time to extract from the array the first value in the count variable, and the second value in the setCount variable.

This is important: we can’t just alter the value of a state variable directly, doing count++ or count = count + 1. ****

We must call its modifier function setCount().

Otherwise, the React component will not update its UI to reflect the changes in the data. Calling the modifier is the way we can tell React that the component state has changed.

The syntax is a bit weird, right? Since useState() returns an array we use array destructuring to access each individual item, like this: const [count, setCount] = useState(0)

Here’s a practical example:

import { useState } from 'react'

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

  return (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>

You can add as many useState() calls as you want, to create as many state variables as you want, which can hold any value, not just numbers (also objects and arrays are valid):

const [count, setCount] = useState(0)
const [name, setName] = useState('John')

Lessons in this unit:

0: Introduction
1: DEMO Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: ▶︎ Managing state
9: Component props
10: Data flow
11: Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!