What is State in Programming?

'State' is a term which you encounter a lot as a developer. But what is 'State'? It's neither a difficult concept, nor a React-specific one as it turns out!

To understand what "State" is in programming, let's understand what the word "State" actually means - outside of programming.

If I'm drinking coffee, my current state is that I'm drinking coffee.

We could also narrow that down: I might be moving my coffee mug to my mouth, so my state is that I'm holding the coffee mug and that I'm lifting it up to my mouth. My state also is that my mouth is opened.

So "State" is not just one thing.

As a person, you are constantly in a lot of different states - depending on how you look at it.

If you split it up (as above), you can assign states to your different body parts (e.g. "mouth is opened") or look at your overall state ("drinking coffee").

And in programming, it's basically the same!

In a web application, the overall state might be, that a modal overlay is displayed, asking the visitor for input (e.g. an authentication overlay).

That's the state of the web application!

Of course, we could also split that into smaller parts: The state of the modal, is that it's opened. The state of the form in the modal is that it's empty. And so on.

With that in mind, React code like this should make a lot of sense:

import { useState } from 'react';

function Dashboard() {
  const [authModalIsOpen, setAuthModalIsOpen] = useState(false);

  // ... more functionality ...

  return authModalIsOpen ? <AuthModal /> : <MainPage />
}

You don't need to know React - no worries!

And "State" of course also is not exclusive to React. As described above: It's a universal concept, not even exclusive to programming!

No matter if you work in web development, frontend or backend, with JavaScript, with a framework like React, Angular or Vue or without one - you will be working with state!

As described above, "State" is really just that: The state (i.e. "current snapshot") of your program or of a part of it - depending on how you look at it.

It's the combination of all those individual states (like "modal is open" and "user is not authenticated", for example) that makes up the overall program state.

And therefore, we can also translate "State" with "Data" - "Data that controls what the program is doing".

In the above code snippet, we're managing some state data in a React component.

authModalIsOpen in the end is basically just a variable which can be true or false. It's just data!

We register it as "State" for React by using useState().

This kicks off some internal functionality in React which basically tells React that the component (i.e. a certain part of the UI) should be re-evaluated and possibly updated, if that data changes (which we might do in some function that's fired when the user clicks a button).

That's why "State" is just "Data" - "Data which controls how the program is behaving" or "Data which has an effect on the result and output of a program".

True, but hopefully, it's understandable.

Because there's no reason to make this concept unnecessarily complex.