DEV Community

Cover image for How to write 90% cleaner code with Hooks 🎣

How to write 90% cleaner code with Hooks 🎣

Amandeep Singh on July 28, 2019

The year 2018 brought a lot of new features into the React Ecosystem. The addition of these features is helping developers to focus more on user ex...
Collapse
 
gerardolima profile image
Gerardo Lima

classes can be hard, but only without a proper type system; it's been interesting to see javascript development going round in circles saying types are not necessary and re-implementing over and over again on half-baked solutions

Collapse
 
aman_singh profile image
Amandeep Singh

Personally, I feel that we should just let the JavaScript be how it is designed to be: Prototypal Inheritance and Functional Programming. No need to mimic the OOP mental modal as internally they are just syntactic sugar over functions.

Collapse
 
gerardolima profile image
Gerardo Lima

i didn't say anything about OOP -- although, as FP, it provides good patterns and techniques that can be applied to javascript -- my point was about using classes in javascript and about it being "hard"; it is not, you just need a proper type system, as typescript; but react folks usually are not keen to the "overhead" and keep hitting their heads into the same walls

Collapse
 
loq24 profile image
Lougie

I think it is a bad practice to put a function inside a function since it will always be defined every render. I'm talking about the handler method in useMouseLocation custom hook.

Collapse
 
aman_singh profile image
Amandeep Singh

Hi Lougie,

Thanks for your comment and I completely agree with you here 😍.

As Dan Abramov says in his article that each render has its own event handler. I know this is applicable when your event handler consumes some state or props variable so that you don't end up storing the stale value (closures).

But here for the sake of ingesting this new knowledge of using hooks, I was setting up an initial mindset for my readers and direct their attention towards using the side effect inside useEffect hook. I didn't want to set opinion or emphasize on some best patterns. That could be a completely separate article 😀

Thanks again for reading this article. 👏

Collapse
 
hubgit profile image
Alf Eaton • Edited

Moving the handler function inside useEffect would fix this nicely (and in fact I see you already did this in the demo).

Collapse
 
ctimmerman profile image
Cees Timmerman

Just when i thought React was the least horrible frontend framework, i read this. Why not a single VanillaJS file that registers an event listener to update its own properties?

Collapse
 
aman_singh profile image
Amandeep Singh • Edited

Hi Cees,

I may be wrong but are you talking about Event-driven-programming? Or I may have not understood your question properly here, but handling events and updating dom properties can be a cumbersome task. What React gives you is a declarative approach. It's more of like

 // UI is a function of data you pass
 data => UI

Moreover, React has its own implementation of a Data structure called Fiber which make sure to not block UI thread (main thread) and gives a performant UI. This is called the reconcilliation process.

I am pretty sure that handling UI updates via events only can be an assiduous task.

Thanks for your comment here 👏

Collapse
 
ctimmerman profile image
Cees Timmerman

Yes, for most programs a simple event handler that updates local properties should work fine.

Collapse
 
xr0master profile image
Sergey Khomushin

I see your new code with hooks for 2 fields and it looks awkward... If you have 50 fields?

Collapse
 
aman_singh profile image
Amandeep Singh

Then you either use your custom hook combining the relevant fields, or use useReducer.

Collapse
 
xr0master profile image
Sergey Khomushin

useReducer with 50 cases? Custom hook is a solution, but its development is more difficult for developers. Who don't understand this, cannot design it. I already imagine a ton of terrible code from juniors in Internet... IMO

Collapse
 
jukebapes profile image
da club has asbestos

So with hooks available do you think it every makes sense to put logic in the view, or should all logic just go in a custom hook.

Collapse
 
vitalyt profile image
Vitaly Tomilov

Carabiners resounded with a merry jingle, as a bunch of climbers flew by on the way down.