Why state management matters

Before we can dive into React state management, we have to talk about why it's important. Why should you care about how you architect your state anyway?

You see, managing state in your React, or even Vue app, is important for 2 reasons:

  1. State is the main point of your application
  2. Modern web frameworks trade rendering complexity for state complexity

State is the point

Why do users use your app? To change stuff.

Whether it's updating something on their user profile, posting a new status update, or editing a document, all those are state changes. You really can't get away from that.

As a user I use your app to change something about my world. The state of my world.

Render complexity is now state complexity

React and most other modern frontend frameworks trade state management for UI management. Let me explain.

You no longer have to worry about how something is rendered or when. You write your components, put them on the page, and your framework takes care of the rest.

You let the framework worry all about creating and destroying your views, tying them to event handlers, rendering on the page, connecting styles, attaching your information, deciding when to update, what to re-render ... All those things that used to occupy most of your brain in the old days.

With React (and others) your UI is now a pure representation of your application state.

That means you're now pretty much free to think just about your state. The business logic of your app. React will take care of the rest.

But that also means there's a lot more options for your state management. More freedom, more available brain cycles, more debates about the one right way to do it.

There is no right way, don't worry. It's a matter of opinion, pros and cons, and what feels most natural to you.

The big problem

What I see happen very often when people run into trouble with their codebase, is that their state design is all wrong.

Either they start off wrong and shoot themselves in the foot. Or the business logic of their problem changes and they're stuck in a system they can't refactor.

Most often they tied their business and state logic too closely to the visual design of their app. Now their designer wants to move a button and they're stumped.

Do I really have to rewrite half my app to move a button?

No! Not if you start things off right 😁

And that's what we're talking about in this Learn While You Poop series.

Starting off on the right foot, designing a flexible system, and the pros&cons of different state management solutions.

Know someone who wants to learn React and its whole ecosystem? Share 👇


Cheers,
~Swizec