From Ember to React — Part 1: Data fetching optimization for react-router nested routes

Ben Orozco
May 2, 2019 · 3 min read
Image for post
Image for post

While refactoring a section of our React app at HealthTree I stumbled upon a common use-case where a parent route/component could potentially share (part of) his data context with his children components, something like:

| <Route path> | Component      | API call           |
|--------------|----------------|--------------------|
| /tasks | <TaskList ...> | GET /api/tasks |
| /tasks/:id | <Task ...> | GET /api/tasks/:id |

As a newcomer, the obvious way to handle this in React (& react-router) is to have data fetching logic in both components’ lifecycle methods:

For some use-cases like this one, data fetched in the first component can be re-used for the second one, thus we have an opportunity to potentially save some bandwidth and improve user experience!

After Googling a bit, I found this approach to send state to a route via the Link component:

That’s cleaner, as we only load the task once, but having to use this.props.location to pass data looks weird, and also this doesn’t solve the fact that it breaks deep linking inside our app! as navigating to the URL or refreshing it will fail to get the state context.

Cross-pollination from Ember

Image for post
Image for post

Having been building frontend apps for the past 3+ years mainly using Ember (a highly opinionated web framework), I remembered a common pattern for Ember apps called Nested Index Routes, which basically allows you to have a parent route where data is loaded, and then allows you to find already memoized records in the sub-routes:

Due to the nature of Ember, models attributes memoization is already baked into the framework itself. But React is not an opinionated framework! but a rendering library playing along other libraries such as react-router, therefore as developers we have to decide and implement which patterns to use!

Back to React-lity

Image for post
Image for post

In my attempt to emulate Ember’s nested route pattern I learned how to take advantage of React composition by using High Order Components and achieve the same kind of optimization:

I personally like this more!

The reason we need React.cloneElement Top-Level API is that in that way we can clone new children and pass the appropriate props with our data context.

Next Steps

We could make this even better by using newer Hooks and Context APIs, but that will reman on-hold for another post…

Cheers!

HealthTree

HealthTree

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store