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

Ben Orozco
May 2 · 3 min read

While refactoring a section of our React app at 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 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

Having been building frontend apps for the past 3+ years mainly using (a highly opinionated web framework), I remembered a common pattern for Ember apps called , which basically allows you to have a parent route where data is loaded, and then allows you to:

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

In my attempt to emulate Ember’s nested route pattern I learned how to take advantage of React composition by using 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 with our data context.


Next Steps

We could make this even better by , but that will reman on-hold for another post…

Cheers!


HealthTree

HealthTree

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

HealthTree

HealthTree