Use Hooks – A Collection of Reusable React Hooks
use-hooks.org
use-hooks.org
Let's say you used Axios directly in your components. That means every component needs to (1) set up its own state to track the request status (like whether it's loading, errored, the latest payload, etc.) and (2) set up its lifecycle hooks to kick off the request at the appropriate times, update the component's state, etc.
Do this a few times and you'll notice things becoming very repetitive. So naturally you look for a way to factor that out.
A higher-order component (basically a function that generates a component with all that boilerplate) is one option. Another option is what you see here – Hooks.
Part of the goal with hooks is to give a way to abstract away the details of how you must interact with the React, without resorting to burying your view-components under 10 layers of controller-components.
Functions work better if you can call them because you can more easily select and add them ala carte and pass individual different specific parameters to each one whereas with inheritance you get one call to super (and advanced react components already extend a class further complicating super calls).
So it is best for one behavior having to only add something in one place to use that behavior. The class model fails because some behavior goes into ComponentDidMount and others go into ComponentWillUnmount and so on.
Hooks solve that. Everything required can be trvially bundled into one thing in one function call.
At first glance the biggest weakness I see for them is that they a bit too magical and that they operate at bit more dynamically than I think would be ideal. They rely on functions being called in the same order and waiting until functions are called for the first time, which seems like the opposite of “declarative”.
Having said that I’ve used them a bit and really like how much they cut down in boilerplate I just wish we had a something that felt a bit more like first class language supported (even if that support requires patching in something like jsx) I just don’t know how that would look or if it would look any different. It just feels like this is scratching deeper itch than just a react only problem but I can’t quite explain how (and maybe I am mistaken for that hunch). Maybe a more expressive language like a lisp would offer a hint at the solution.
Dan's blog post is much better, in comparison. Start with that maybe.
I like https://www.hooks.guide/ way more as it provides both usage + implementation of many different hooks from the community.
https://use-hooks.org/ is actually an entry of GitHub Organization https://github.com/use-hooks, it aims for creating custom hooks easily and putting in one place.
However, I have a hard time in understanding why I should use all these tiny ‘use’ libraries? Hooks are already simple to implement such small snippets yourself in your codebase.
In another way, if a Hooks includes business logic, then it should be put in your project.
You really do not want large numbers of developers, with varying levels of experience, trying to figure out how to do something that has already been solved, and making the same avoidable mistakes in the process – unless you are deliberately trying to teach them something at that moment (whereas most of the time they are just trying to get things done on a tight schedule).
The job of a developer is only secondarily to write code. The primary job is to fulfill the actual real-world needs of their business or organization. Customers don't want code, they just want their needs met. Unfortunately sometimes this involves barfing out a lot of code – which is more likely a liability, not an asset to the company. The more new code we can avoid bringing into the world, the better.