The business value of React Hooks is huge
React Hooks were officially released in February of 2019 and since then the frontend world has started changing rapidly. Other popular JavaScript frameworks such as VueJS are moving also to a more functional approach as we can see here so the future seems bright for Hooks.
What are Hooks?
Hooks are simple functions which have specific input and output.
This is a dead simple Hook we can use to handle forms with controlled inputs across all our applications:
Here is the form that uses this custom useForm hook:
Under the hood closures are used so things become much more straightforward without the need of ES6 classes and the super-evil this keyword in JavaScript.
Why Hooks?
With Hooks we can share logic with ease across our components, our applications and our teams and this is where they are nailing it.
Before Hooks era, we had to use more complex patterns like HOCs and render props. These patterns helped us to re-use logic across our components but we had difficulties in debugging and maintaining them.
The end-result was a little unreadable as we can see below since we had to mix markup with logic (render props):
Because of this mixture, they introduced extra components in the components tree and this made things really ugly in big codebases and complex web applications.
Testing also was a nightmare since we had to dive deep in components tree to spot the one we wanted to tweak with Enzyme’s shallow.
Hooks help us to write more readable and maintainable code as we saw above because we can distinguish the logic from the layout entirely.
The end result is much cleaner since we don’t have anymore garbage components in the components tree:
For testing we can simplify our tests a lot by using react-testing-library which encourages writing tests that use our components as the end users do and avoid all this craziness with deep dives with Enzyme shallow testing or the side effects with Enzyme mount testing.
Hooks for ui-kits
It is quite common for big organisations which use React to create ui kits with presentational components in order to build web applications faster and help their teams to move forward with less constraints.
Some great examples are Shopify’s Polaris , Microsoft’s Fabric and many more.
React Hooks make this process a lot easier since we can rely on function components to build a rock solid ui-kit.
Hooks for utilities libraries
Apart from collections of presentational components, we can now build collections of utility methods with Hooks. That way we can stop re-inventing the wheel and rely on existing pieces of logic when building a Minimum Viable Product or a brand new feature.
Some examples can be pagination, forms handling and validation, smart editors, vertical auto-scrolling, localStorage management and many more.
Below you can find tons of nifty open source React hooks:
Re-usable components give us speed and stability
From UI / UX perspective the value of having re-usable components is really huge. It demands both developers and designers to be involved so this helps us to avoid UI / UX inconsistencies.
Also the designers learn to think in terms of reusability and atomic design some more.
Last but not least, the teams design much more before delivering a component and this is quite beneficial down the road since we avoid big iterations and long refactoring cycles.
New / Junior engineers can accelerate faster
Re-usable components help also new team members or less experienced engineers to accelerate and become valuable members of the team which is something really difficult to achieve when talking about big codebases and complex web applications.
Apart from that, these components are definitely a great guide to demonstrate how we should structure our code, what conventions and best practices we use as a team, what is the company’s styleguide and so on.
Conclusion
React Hooks are quite fresh but their impact upon the Frontend world is really huge. We can now rely on simple functions to build collections of reusable function components and share small pieces of logic across our applications and our teams easily.
Business-wise this is really important because we can build faster new features or even brand new web applications. The teams can communicate smoothly because of them and the code we use to achieve this is much simpler and easier to understand and maintain.
These are some key-points in order to scale and React Hooks definitely help us to accomplish this. Cheers!!
