The modern guide to React state patterns
Since its inception in 2013, React has rolled out a robust set of tools to help relieve developers of some of the minutiae of creating web applications and allow them to focus on what matters.
Despite React’s many features and consistent popularity among developers, however, I have found time and again that many of us ask the same question: How do we handle complex state using React?
In this article we’ll investigate what state is, how we can organize it, and different patterns to employ as the complexity of our applications grow.
In its purest form, React can be considered a blueprint. Given some state, your application will look a certain way. React favors the declarative over the imperative, which is a fancy way of saying that you write what you want to happen instead of writing the steps to make it happen. Because of this, managing state correctly becomes supremely important because state controls how your application will behave.
Before we get started, it will be useful to briefly discuss what state is. Personally, I think of state as a collection of mutable values that change over time and directly influence component behavior.
