Step 23

We can fetch the definition of a word. We must now update the Definitions and Phonetics components accordingly. First, however, let us talk a bit about another essential feature of React. This feature 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 everywhere.

Some UI frameworks like Angular and Ember use Two-way data binding where the data is kept in 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 the app grows large. In contrast, React uses a straightforward method of passing data down to components:

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

To adhere to this pattern, we shall refactor the Definitions and Phonetics components. In the next section, we will uplift the data these components consume into their parent component, the App.