Step 12

Notice I could have created the state in Output component as

this.state = {
  cycles: this.props.cycles
}

And then update the state in the Output component.

This is an anti-pattern; when defining a component's initial state, avoid initializing that state with props. Why? because it is error-prone. It also leads to duplication of data, deviating from a dependable "source of truth."

Let's talk a bit about another important feature of React. This has to do with data flow.

Data flow is about managing the state of the app: when data changes in one place it would be reflected every where.

Other popular front-end frameworks like Angular and Ember use Two-way data binding where the data is kept sync throughout the app no matter where it is updated. That means any part of the app could change the data. This solution is hard to keep track of, when app grows large.

React uses an explicit method of passing data down to components:

In React, data only flows in one direction: from parent to child. When data gets updated in the parent, it will pass it again to all the children who use it.

We will talk more about this in future modules. If you are interested in learning more on this, I recommend reading Unidirectional Data Flow in React.