React Promised Component

Problem Statement: A component, that natively support showing components when a promise is pending, fails or succeeds. And provides a retry capability.

 

 

While working with React, I came across many cool things (that are provided by React and the community). As I moved further into the space, for my application, I found out that in a very basic kind of application there are times when one has to call alot of APIs and showing something depends upon the result of that call.

So, imagine a page having quite many components, all handling different logics from various parts of the application. I wanted an image to be shown when a promise to the API completes and in case it doesn’t complete, I want a retry button to be shown instead.

Similar could be the case for the list of data, for a web view or may be the whole screen (using this name in context of react native).

I went through many pains of having redux in place to do the state management for me in case things fail or succeed. Initially I felt like its awesome! But as the time passed, I figured out that its a lot of trouble to maintain states for each component on the screen or probably most of them. I needed a way to separate this logic from the other things I was doing in the App. I just felt that it is a tedious task and could be done on a pattern, as I can see a pattern being formed there.

Lately, going through the problem, I was reading about higher order components of React. They were something awesome, but before I realized the pattern, they were just another thing to be provided by React itself.

After boggling my head around this problem, I felt that HOC can really solve the mess I am into, and why not give it a try. Amazingly it did all I wanted, with a touch of simplicity.

Moving further, I created yeoman generator for this kind of Component and named it React-Promised-Component, as it responds on promise states with different components.

If you are going around the same problem and want a simple solution, please do checkout what I did on a github repo. The packages are already available on npm and the generator is live as well. I would highly appreciate if you can review the code and share your thoughts on it.

If you are with me till here, Thank you very much for your time, and you are awesome ;)

Advertisements