There are two types of data that control a component: props and state. The parent sets props, and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
You should initialize the state in the constructor and then call setState when you want to change it.
The Component that uses the state is mutable, and it can be changed later on if required. The props component is immutable, and it is fixed throughout the lifetime.
For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking Component gets created, so the text itself is a prop, "whether the text is currently on or off" changes over time, which should be kept in state.
You probably won't be setting a state with a timer in an actual application, and you might select a state when you have new data from the server or user input. You can also use a state container like Redux or MobX to control your data flow. You would use Redux or MobX to modify your state rather than calling setState directly.
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the Component will re-render every time the Timer ticks.
State works the same way as it does in React, so you can look at the React for more details on handling state. Component API. At this point, you may have noticed that most of our examples use the default text colour.