Untold practices to write better React components

React is a declarative and component-based library and it handles one thing only and that is UI. React has evolved a lot. Each new addition in React is eclipsing the previous popular counter-part. Function components are more popular and encouraged than class-based components. React Context is encouraged in place of Redux to state management. Anyhow, In this story, we’ll see some untold practices which will reduce the mess in React components.

We often use flags in components like isLoading , isSuccess or hasError etc. to handle some functionalities. So what is wrong with them? Let’s see an example:

Did you see something wrong? yeah, multiple flags are being managed for one API call. This is a very simple example with one API call and all three flags are being reset at every effect. But with these 3 flags, I might have to tackle a number of options in a real-world scenario like when these might not be changing together or might be not resetting together. So, in that case, you’ll have to use a combination of these flags to know what is the current state of the component or accomplish some functionality. That will mess our code more.

Now here is another point of view to look at them. At one point in time, the component has only one status. either it is loading or success or error

Now let’s see a better version of this:

Management of multiple flags has been reduced to a single flag which is status and the code has become cleaner and more readable. And in the real world, you don't have to worry about checking multiple flags to determine the final state of the component or achieve some functionality.

We use useEffect hook in function components for side effects. Ideally, a component should do only one thing. But the real world is not an ideal world. Let’s look at an example:

I have tried to catch some complexity from the real-world scenario :P. As you can see the problem, multiple things are being done in a single useEffectcall. Though it is readable but harder to understand and manageable. I did not mention the dependencies but as you can guess it will become hell to mention all the possible dependencies in the dependencies array. And it will become messier with time in the real world as more and more requirements are going to come. Ideally, The best approach is a single component should do only one thing. So in the ideal case, we’ll have only one thing in useEffect in one component. So how can we make it more manageable and more understandable. Let’s take a look at a better version of it:

Yesss, you guessed it right. Single responsibility principle in action in useEffect . If you cant make the component do one thing only, at least make theuseEffect to do one thing only. For every new side effect, use new useEffect . In the above example, though the component has more lines of code but I can understand at a first glance that this useEffect is only doing one thing and only blah and blah are its dependencies. If at some point in time, you want to remove/add a new effect in your component, just remove/add its useEffect without implicating others.

If a component is doing more than one thing then its time to divide it. If a thing is being used at more than one place then it is time to take it out and make it a separate entity. If that thing has UI involved, make a separate component and if it is just logic/side effects then make a separate hook.

That’s all. These points are from my perspective that I learned through my experience. If you have a question/objection/better practice, do let me know I’ll be more than happy to climb with you to the peak.

Related posts:

Me cansam pessoas que ja foram demasiadamente próximas e hoje cospem pílulas de protesto sem o mínimo de embasamento Não se precisa de embasamento para saber onde falta, mas o mínimo e necessário…

So before the 11th Century Christian church witch burnings and systematic degrading & removal of the elder woman high priestess, shaman, healer & lawgiver of the tribe: the term Crone (crown) & Hag…

My experience at the Valley began well before I landed on SFO, more precisely ten months earlier. I joined Pipefy in August 2017, through the first edition of the Young Guns program, and frankly, I…