The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

State updates based on previous state

Sometimes we want to update a state based on its previous... state. For example, a Count Dracula 🧛 button where each time people click it, the state increments by one (Gonna add this one on my future portfolio site.)

React is very well built, however. Too well build. React will bundle state updates to save resources. The impact is things become asynchronous, which is a massive pain in the ass to debug 🤧.

To fix this, we can use this syntax:

this.setState((state, props) => ({
  count: state.count + props.increment
}));

The brackets around the object is just a syntax.

Stateful components, and where to find use them 🐉.

The main paradigm of React is a unidirectional data flow. It just means that data is passed down from parents to children, and children should only communicate to parents by calling functions.

So what does this means? Well, you only need a few (if not one) stateful component as parent, handling the app logic. The rest of the components only serve to handle the bling-bling ✨.

You can break down the whole app into small components, that can be controlled by a few, big stateful components.

Afterwords

The React course on FreeCodeCamp at this point focuses on more examples and practices. So tomorrow would be kinda mind-bending 💫, but almost no new thing. I dunno what to post tomorrow 🤣.

Follow me on Github!
Also on Twitter!