React JS Tutorial - #9 State Up, Props Down

Now that the app is functional, let's take a moment to refactor our code. Apart from a few minor stylistical touches, we'll also re-organize our components, so that the countdown becomes even more modularized and manageable. The Countdown in index.js will be the "master" for the Timer and the Controls (and soon enough, the Datepicker!), and will be the only stateful component in the app. It will house the application data, as well as the behavior (methods) on that data, which will then be passed on demand to other, functional, components. This reflects an important principle of data flow in React: state up, props down.

Our goal is to lift the shared state to the parent ancestor, retain that data local, or encapsulated, to the "master" component, while passing it down through props to the children. Contrast this top-down, or unidirectional flow with two-way binding found in VueJS and Angular. React gives preference to one-way biding because it helps to track down the source where data changes originate, making data flow predictable and maintainable (think Redux, for example).

For your further research endeavors:

"Two way data-binding was a feature in 2013 and Facebook said it was a bug. It turns out they were right." https://medium.com/@chriscordle/why-angular-2-4-is-too-little-too-late-ea86d7fa0bae