CODEX
How hooks simplifies data fetching in React app
I am a software engineer who is working on react for more than four years now. I still remember creating my first react app with React.createClass. I was very quickly drawn towards the idea of state and props. And I firmly believed that it is a genius way of representing UI. I am glad that I picked react as the main UI library and hold on it.
But there was one thing which I never really grasped completely — that is the role of global state management libraries. Don’t get me wrong, I have worked (or played) with all noticeable solutions i.e Redux, MobX, Unstated, etc. But I always had questions around there approach and implementation. Regardless of all the concerns and doubts, I have worked with redux for more than three years now. I have written big size react apps with redux and I can comfortably say that I know redux inside out.
Redux is a great tool and serves the purpose really well and by no means, I am against it. I just want to share my love and hate relationship with it and how react hooks simplified a common reoccurring pattern in my frontend application.
We all know that redux has bad reputation for being too verbose. This might feel okay in the beginning but as the app grows you will start noticing issues like writing too much boilerplate for the same kind of tasks. And sometimes it is difficult to decide what state goes to the redux store and what lives in react component eg. loading state for a spinner etc. As the app grows, the single state object also grows and becomes quite complicated and hard to maintain. In my opinion, redux also adds a cognitive overhead by introducing concepts like reducers, thunks, sagas, middlewares, etc. All of these are not specific to redux and there are solutions to these issues but I felt it is important to share my thoughts before I move to hooks.
Recently I started looking into new react hooks API and decided to give them a try by writing a view/screen entirely using hooks. I explicitly decided to not use redux for this particular view. The first thing for which I used a react hooks was the most common and repeating scenario — making API calls. This is the simplest and most common thing that a component does and there are hundreds of ways to do it in redux. Generally, you will dispatch an action at component mount time. You will set some state to indicate that data is loading so you can show loading spinner on UI. Then you asynchronously set the received data or error to state and update flags like isLoading, isErrored etc. This can quickly become cumbersome if you want to do long polling or some kind of retry strategy on error. All of that logic is usually tied to component lifecycle and it is difficult to share this common functionality across multiple components easily.
Hooks solves this problem quite elegantly (I am not going to explain how they work). I wrote a hook to do this task and I was surprised to see how easy it is to fetch data, show a loading spinner while request is happening and handle errors if there are any. There is no global state involved, no actions (and types constants) and no sagas(and generator functions and unnecessary functions like call) or thunks. Everything was self-contained and at easy to understand. I really like the fact that I don't have to define multiple states for my one API call at several places — everything was at one place, inside the hook and local to the component. Here is the code for my hook:
It uses useState and useEffect hooks. It has three state variables i.e data , isLoading, error. And it will cancel the network call if component unmounts which is quite neat. In my opinion, it is quite evident that this hook is better than redux implementation of the same thing. It is one function, responsible for one thing — unlike redux implementation which is shared across actions and reducers.
I have published a hook for this use case. It supports api calls, retries on error and polling: https://github.com/zaingz/use-axios-hooks
I hope you found this article helpful and interesting. Please share, clap and comment. I am really looking forward to your feedback and thoughts.
