Blog: The State of Frontend (UI/X) à la React Hooks

Manny Becerra as a child

December 2018

The ReactJS team officially rolled out the latest feature addition to their snazzy JavaScript Library, and it's dubbed: Hooks.

Overview

I've been following the ReactJS team's work on this front for a while now, much of it delivered to the community in "teaser trailer"-esque nibbles, so when the announcement was made showcasing hooks in all its glory, I was not dissappointed at all. Some of the things I'm excited about that hooks either brings to the table directly or acts as a catalyst for further discussion and evolution are:

  • using state in your components (app) without writing a class
  • a more clear separation of concerns within the View layer itself, e.g. side effects, DOM manipulation, state, etc.
  • underscoring the value and extensibility of function composition

To me, this means writing less code, in general, for implementing the same set of features one would write under the class paradigm, along with the ability to create more reliable, deterministic user experiences with said (less) code and separation of concerns.

Learning Hooks

Also, I want to give the core ReactJS team and their cross-functional teammates a hat tip on their online training material that complements the announcement of hooks exceptionally well. Having an educator background, I appreciate their easy-to-follow, workable examples on hooks. Great work all!

Demo Time: Animated, Responsive Graphs (Data Visualization)!

I created some working examples using React hooks, and what better way to showcase something new than to demo it with some responsive, animated graphs. All examples also leverage SVG.

The styled button, toggle-slider and layout components are from my perpetually-in-progress, but handy Bristlecone design system.

Pro-tip: Touch or click the legend icons, or respective label text, to show or hide subsets of the graph data

Data points: 5
Datasets: 1
Quarterly
Annual

In closing

The React code for creating these dynamic, responsive and animated graphs is relatively short-and-sweet when compared to what it would require to do the same thing under the class paradigm. I'll see about writing a follow-up post that goes into the weeds of the code for those that may be interested.

I'm excited about transitioning more of my future frontend work, both, individual and with teams, toward React's hooks addition; it seems very promising!


Manny


I have a passion and successful track-record for creating usable, online, experiences with a focus on and deep appreciation for web standards, modularity, education, accessibility, and inclusion. I build and lead happy, productive and empathetic cross-functional teams within a continuous learning culture. I am a speaker, advisor, community builder and advocate. Learn more.