How To Decouple Data from UI in React
Approach A. Custom Hook

Let’s create a custom hook — useSomeData — that returns the properties someData , loading , and error regardless of the data fetching/management logic. The following are 3 different implementations of useSomeData .

With Fetch API and component state:

With Redux:

With Apollo GraphQL:

The 3 implementations above are interchangeable without having to modify this UI component:

But, as Julius Koronci correctly pointed out, while the data fetching/management logic is decoupled, the SomeComponent UI is still coupled to the useSomeData hook.

In other words, even though we can reuse useSomeData without SomeComponent , we cannot reuse SomeComponent without useSomeData .

Perhaps this is where Render Props and Higher Order Components do a better job at enforcing the separation of concerns (thanks again to Julius for highlighting this).
['Suhan']
['JavaScript', 'React', 'Technology', 'Software Engineering', 'Programming']