Published in


From Ember to React — Part 2: Top-Level component concerns

In Part 1 of “From Ember to React” series I introduced a pattern to re-use data fetched in a Top-Level component into his children. Then I started to realize that I could make use of this pattern to bring even more ideas from Ember into React! Here are a couple I used lately:

Loading Indicator

Sometimes we want to show a “Loading indicator” to let the users know when a request is being processed. As suggested by this post, logic and markup should be placed on a top-level component to be reused by subsequent components.

As before, I remembered a handy Ember feature called Loading / Error Substates already baked into the framework itself. Turns out our previous “High-order Component & Wrapper”-pattern is a perfect place to replicate this pattern, as we don’t need to repeat the loader in every single component:

This way we can re-use the Loader logic in children components in case we need to hit another remote API:

Error Handling

We can apply a similar pattern for error handling, in this case I would use a generic modal to show potential Network errors:

And you can use it within the children components in similar fashion using a Try..Catch block:

*Update: I found it’s also a good idea to put Error Boundaries logic around here as well

Nothing is perfect…

The downside (no pun intended) to this patterns is that we need to pass down the actions props (showLoader and showErrorModal) to every child component, and if our component tree is deep enough that’d be a tedious and error-prone task, not to mention super verbose!

The solution for this problem in Ember was using an add-on called ember-route-action-helper, which is used to “bubble up” actions to the parent route. This is possible due to the existential difference between Routes and Components in Ember’s object model, but since React is all about Components-only we cannot easily replicate this feature…or can we? 🤔

When Context API?

Most of this pitfalls could potentially be alleviated using the React Context API, but again, I will leave that for another day 😬





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
Ben Orozco

Ben Orozco

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

More from Medium

Final notes on running Jest with TypeScript and ES Modules directly

Unit Testing on React App with Jest

Document Transition API — Creating a React Hook

Component from NPM module cannot be used as a JSX component