The goal of this chapter is to show the different data fetching patterns that we can put in place in a React application. To find the best strategy, we have to understand how the data flows within a tree of components in React.

It is important to know how the parent can communicate with its children and vice versa. It is also crucial to understand how unconnected siblings can share their data. We will look at some real-world examples of data fetching, and transform a base component into a well-structured one using HoCs.

Finally, we will see how existing libraries such as react-refetch. can save us a lot of time by providing the core data fetching functionalities we need.

In this chapter, we will cover the following topics:

• The unidirectional data flow of React and how it can make our applications easier to reason about
• How a child can communicate with its parent using callbacks
• The way two siblings can share data through their common parent
• How to create a generic HoC, which can fetch data from any API endpoints
• How react-refetch works and why it is a useful tool that we can integrate into our projects to make data fetching easier
• How to use the new Context API