M.Y. State of Mind
State was the most difficult concept for me to grasp in React. After a month of intensive training and after building my React product (www.SickSims.com), I finally grasped it. This post is an overview of my understanding of state - one of the cornerstones of React.
State
Steve wasn’t referring to state, but using his awesome quote here is a cheesy way to remember that state is all about change!
In React, state is an initialized class object holding a component’s values that are expected to change. It took me a week to realize that state was not just for one value. I only realized that state was for multiple values within an object when I truly understood class components in React, which initialize instances of themselves just like any other class component in object oriented programming. Every class component maintains its own state data. In React, every time a component’s state changes, the Virtual DOM is re-rendered.
Virtual DOM
React’s DOM isn’t just any ol’ DOM - it’s a Virtual DOM. In another post, I explained the DOM. In an imperative language like Javascript, we explicitly tell the DOM system (model) to change a thing (object) on a web page (document). In a declarative language like React, we can simply rely on the Virtual DOM to handle re-renders based on changes in state through reconciliation.
Reconciliation
This is magical. Through a tree-like paradigm, React essentially holds a current version, work-in-progress version and an updated version for what to update and how to update. In the effort to be more performant, it handles these updates in batches by comparing the differences of these three versions in a ‘diffing’ algorithm. All this leads to more efficient content rendering, but it comes at a cost. The cost is that for React to uphold its magic, one must strictly adhere to the rather abstract development principles for state.
Principles for State
How can React know what has changed so it can re-render only the respective content?
Immutability
The most important principle in React is to never mutate state. If you do, React will not know that state has changed. Instead of mutating state, we make copies of state that we then update for React to maintain version control.
setState
This instance method is the only way we should ever transform the state of any component. I wish someone had beaten me over the head with a (foam) bat that had setState written on it, as it would have saved me days of development time. It was only when I learned how React uses changes/differences in state to re-render content that I understood (and remained conformant with) how to transform state in React. As important to understand is that setState is handled asynchronously in React.
prevState
As mentioned, React handles state transformations and re-rendering in batches. This leads to us not being able to fully rely on the current state being the most updated version of state. Whoa. That’s rather confusing!
So long as we understand what we’ve gone over so far with how React is working under the hood, this shouldn’t be a surprise. Regardless, it took me another week of programming www.SickSims.com (that uses state extensively) to really understand this bewildering truth in React.
Enter prevState to the rescue. This is a built-in solution in React’s setState method for us to be able to use the most updated version of state (aka prevState) in order for us to subsequently update state with setState. An applicable use-case for this would be updating some type of counter in an application (ie a like button on Facebook, who actually invented React).
Redux
Is your head spinning yet? Mine sure did until I grasped state. I’m so glad that I finally came to understand state as it is such a powerful tool for application performance with React.
Well, another cornerstone of React is its modularity of stateful components. While modularizing, imagine how complicated it may become to pass state up/down components, all while maintaining conformity with the aforementioned principles of state.
That’s where Redux’s global state comes in handy.
Total cliffhanger…but in a nutshell, Redux allows us to manage a global state which all components can connect to, with a unique dispatch method to transform state without explicitly needing setState or prevState.
To cement my knowledge of state and to increase my appreciation for Redux, I built www.SickSims.com entirely in React without Redux, then refactored it using Redux. By glancing at my 250+ subsequent code versions on GitHub, you can see my code become notably more abstract with Redux.
