Learn TypeScript 3 by Building Web Applications

Naive approach – propagating state changes using custom events and props

One approach to passing data around the application is to leverage custom events and component inputs (that is, props), as shown in the following schema:

In this example, the component in dark gray has changed a piece of data and emits an event to let the rest of the application know about the modification. Components in light gray depend on this data and need to receive the new state.

As the diagram clearly depicts, the issue is obvious: for light gray components to receive the new state, many intermediary components need to receive it through props and emit it through ...