How stateful rendering makes your job easy 💪

So far we talked about React's most obvious innovation, which is JSX. Yesterday we mentioned state versus props, which leads us to React's biggest innovation, which is stateful rendering.

Stateful rendering is that thing in React that makes your life really easy and helps you the most with ... Well, it basically takes away the most annoying part of Web development, which is managing state changes and how they render to the DOM.

Let's say you have this container of some sort of magic cream that makes you young and beautiful. If you want to re-render this with the top spinning off and being taken away you have to think about, "Okay, I have to find the top, I have to make a transition that makes it spin around, and then it needs to be taken off." Whereas with React, all you have to do is say, "Top on," or, "Top off," and the component, which is this, says, "Oh, if the top is off then I have to transition to spin and render it top-off."

Yesterday we drew this button that has some props and some state, and a lot of people complained that, "Hey, buttons don't really need state." And that's true, but this one does because I wanted to show what stateful rendering is all about.

It takes a label prop and a rounded prop, creates a new button with some styles and the correct label. And we have a button here that doesn't do anything.

If we want to have some state for whether the button was clicked, we can define as false ... On the button we define an onClick handler. This whole onClick thing is what React calls a "syntactic event handler." In onClick ... this is going to be a method ... calls this.setState, updates our state ...

So we now have an onClick handler, where if we click the button, calls our onClick function, which updates the state of our component.

Updating state tells React that, "Hey, this component has changed. You should re-render it."

If the button was clicked then use button styles, otherwise don't use anything.

We get a small button, and when we click it, it becomes a big button.

So that's the idea behind stateful rendering. We want our UI to be a pure representation of state so that we can focus on manipulating state and putting all our business logic in just data changes; and then React is going to pick up on those data changes and take care of re-rendering our things so it looks perfect and the way we want.

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


Cheers,
~Swizec