React: why are my state variables behind??

This post is aimed at those who are new to React and are staring to encounter some of its seemingly peculiar behaviours. It is intentionally simplistic and offers the explanation of one particular behaviour that I was looking for when I first began to play with the library.

If you're anything like me, you learned to make pretty websites using vanilla JavaScript and thought you knew it all. Then along comes React and Next.js and suddenly everything gets turned on its head!

I found learning React a complete pivot in terms of how I worked with JavaScript. I'm pretty comfortable with it now, but my gosh it was a learning curve! It still is a learning curve, but at least now I understand the paradigm and can therefore overcome most of the obstacles I encounter.

In particular, moving from regular variables to state variables was an interesting shift.

Rather than declaring variables like this:

let x = 123
const name = "Max"

we instead use the State Hook and declare variables like this:

import { useState } from "react"

const [x, setX] = useState()
setX(123)

const [name, setName] = useState()
setName("Max")

It makes total sense when you realise it's just a different (and logical) approach to variables, but at first it's totally weird and exemplifies the uncanny vibes that come with moving to React as a relative newbie.

Where's my missing letter?

One of the first things I found really weird was the fact that I no longer had such easy access to console.log when I wanted to check variables.

Previously if I wanted to see what a variable was, e.g. to check what had been entered into an input, I'd just console.log the variable. Easy.

With React, taking the value from an input requires us to set the state every time the input changes, like this:

onChange={(e) => setName(e.target.value)}

So each time a new letter is added, the state variable becomes that letter and all the pervious ones.

But I found a peculiar thing was happening - when I console.logged my state variable it was one letter behind what had been entered into the input! My name was coming out "Ma"!

Clara Situma explains that this is due to the fact that when we set state it is called asynchronously, which means it happens after the function that called it, resulting in our variable seeming to be one step behind.

Though this isn't a problem, it can cause issues if you don't handle it properly. For instance, while it might not matter if you log someone's name one letter behind, it can be a big problem if you intend to add their name or other details to a database.

Enter useEffect

To get around this, we need to look to another React Hook - useEffect. This hook takes a "setup" and "dependency" and will execute the code in the setup when the dependency changes.

For example:

import { useEffect, useState } from "react"

const [name, setName] = useState()

useEffect(() => {
	console.log(name)
}, [name])

In this snippet, the useEffect Hook has the name state variable as a dependency. This means that only when name has actually updated will it console.log, the result being that what is logged will actually reflect the reality of the variable. Neat!

This applies not just to logging your state variables of course. Any time you need to take a state variable and do something with it, you can use a useEffect Hook to make sure that you're capturing the most up to date iteration of that variable.

Onwards and upwards

This brief overview of my learning with React will hopefully clear up a mystery that seems common when starting out with React.

I'm sure that it's not the end of the story - the library has 15 different Hooks and I'm only just scratching the surface, but the rest will come with time.

The approach outlined above has allowed me to implement varied functionality in my React applications for the time being, and the great thing about web development is that I get to learn the rest later!