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

Ben Orozco
May 10 · 2 min read

In 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 , 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 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 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 , 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 , but again, I will leave that for another day 😬

References

HealthTree

HealthTree

Ben Orozco

Written by

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

HealthTree

HealthTree