Let's take a look at how to define state inside of React components in order to motivate the usage of class properties. First, the most basic setting of any state: static values.
There's nothing inherently wrong with this approach, but we
can use class properties to clean up the
boilerplate. The less code in the constructor function, the
less time someone has to spend understanding the code I
write. Here's a
class that is functionally the same, but
uses class properties for defining the initial
We've eliminated the imperative setting of
favor of a declarative class property. If we trim down the
babel configuration to target node 9, we get a very clean
compilation result that yields a key insight. repl
The state we just declared in a class property is set in the constructor just like our original example! This is a great example of how babel lets you write code for humans instead of machines. With this key insight in mind, we can connect it to the usage of props to set initial state. Instead of populating the constructor function, we declare what we want state to be.
This compiles to essentially the same code we had before!
Use class properties. Of course, you should also go play with the codesandbox for an easy testbed that includes state modification via a timer.