Using React Hooks to Increase Engineering Velocity
A Guide on How to Build Faster and with More Harmony
What is engineering Velocity?
Engineering velocity is important to us at Gladly. We measure it not by how many stories are completed or lines of code are written, but by a few different factors. To us, engineering velocity means writing code that is:
- Simple
- Encapsulated
- Reusable
When code is simple, it doesn’t take engineers long to ramp up on a new code base, meaning they can switch between projects with ease. When programs are encapsulated, they silo data and methods to the parts of the application that needs them, eliminating bugs that come from sloppy logic. When components are reusable, it means there is less time spent rewriting the same basic functions over and over again, thus saving time in the future.
While it might take more time to write code that is simple, encapsulated, and reusable, the payoff is that our team is empowered to work better together, which means getting more done. After all, engineering velocity is not just feature work, but also the investment of time to learn and implement better coding practices.
One of the investments we have made recently was to learn about and start using React Hooks.
How do React Hooks help?
React Hooks, for the unfamiliar, are a new feature of React, as of React v16.8.0. They are functions that bring state and lifecycle methods into functional components, meaning that it is now possible to bypass creating class components. The tutorial on React’s website is great for anyone who is looking for a deeper dive.
Have you ever written a functional component, only to realize down the line that you need access to the state or lifecycle methods? Big sigh. Now you have to convert your component to a class, which means tons of boilerplate code and things to remember, like binding your handlers in the constructor. With React Hooks, developers can “hook into” lifecycle methods and state without changing to a class. That’s simple.
Have you ever had a complicated bit of code that required all sorts of lifecycle and state management to function properly? This logic had to be spread throughout different methods in the component. With React Hooks, you can create hooks that introduce and manage their own state internally. Then, other components can use the hook without even being aware that it is stateful. That’s encapsulated.
Before React Hooks, there was not an easy way for components to share code that relied on state or lifecycle methods. For instance, an onMouseHover handler–and all the state and lifecycle method logic around it–would need to be copied, pasted, and maybe tweaked to work with another component, or extracted into a difficult-to-use higher-order component. With React Hooks, you just call the hook in whatever component needs it. That’s reusable.
Conclusion
As a startup, we have to be nimble because we work with a smaller engineering team than bigger companies do. This challenge has forced us to be mindful in how we make decisions when introducing new tools, establishing best practices, and designing program architecture. We believe that it has made us all better programmers.
If this sounds like the kind of team you would like to work on, check out our job board! We are always looking for talented engineers to join us in our mission of revolutionizing customer service software for the 21st century.
