Learn TypeScript 3 by Building Web Applications

Communication between distant components

We have shown a few examples of how to pass props from a component down to its children, but what happens when components that need to exchange data are further away from each other in the component tree?

In these cases, you have different choices.

First one is simply to keep passing the values through props, but you can only do that until the point where it becomes too cumbersome and creates strong coupling between otherwise unrelated components.

At that point, you can consider using a feature of React called context (https://reactjs.org/docs/context.html), which we won't be covering in this book. The Context API is useful, but it can limit the reusability of your components, so it should be used ...