On React Hooks

On the afternoon of October 25th I hastily shuffled my work to the side and fired up YouTube, knowing that the ReactConf 2018 keynote was minutes away from starting. This would be the first conference keynote I watch live, and I wanted no interruptions. As the next two hours began to unfold I realized I was witnessing a significant moment for React. An evolution of the library.

Coming off the heels of a strong v16.6.0 release, the React core team announced hooks, a feature proposal that exposes certain capabilities to function components such as state and lifecycle. These capabilities were previously limited to class components.

You can view the entire keynote along with a follow up talk from Ryan Florence in this YouTube video. If you have 90 minutes to kill I encourage you to watch. 👀

Still here?

Hooks are an experimental proposal. Nothing you see or hear on the topic should be considered final. There is currently an open RFC where you can stay current on the proposal, and even voice your concerns if you have any.

What are hooks?

As I stated earlier, React hooks are a way for function components to access certain features previously unavailable to them. The obvious ones being state and lifecycle. They are not to be used in class components.

Here's another definition from the React docs:

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

This is a major shift, both technical and conceptual. However, hooks come with no breaking changes. They're backwards compatible and opt-in, meaning you as a developer don't need to use them at all. If that's your prerogative. It's an impressive selling point.

What problems do they solve?

The Motivation section of the official docs details specific problems that the React core team believes hooks will solve, so I won't regurgitate those here. However, I do want to add my own point-of-view.

Moving away from classes

I've had a strange relationship with classes in JavaScript. Sort of like a monster in my closet that I refuse to acknowledge. JS is my first programming language, and I definitely haven't worked with another that has classes in the traditional sense.

I've heard that classes in JS are different than classes in other languages. This leaves an empty spot in my brain, as if I need to go figure out what those differences are. I still haven't.

I've heard that you should avoid classes in JS. In fact, I heard this before I started working with React at all, so you can imagine my confusion when coming to the library and realizing that classes were fundamental.

The introduction of hooks is an indicator that the core team sees value in function components over the long term, and there are clear reasons to prefer them over class components. That being said, I don't think we will see class components phased out any time soon, if ever. This would go against React's seemingly backwards compatible mindset. Imagine all of the code that would be affected by such a change!

Long live the function!

The longer I do this whole programming thing the more I discover about myself. One of those discoveries is that I love writing functions. It doesn't matter the language.

I once read (and didn't finish) an oft-cited book in the realm of programming called Structure and Interpretation of Computer Programs. It comes with a slew of example code that you can work through in Scheme, a dialect of the Lisp programming language. It was my first real introduction to the functional programming paradigm, and man was it cool. I loved it. I should finish that book someday. 🤔

I digress. Where were we? Ah yes, functions. Building user interfaces with functions as my building blocks seems to make a whole lot of sense. The composibility is there. The developer experience just feels right. I lose that feeling when I'm trying to refactor some voluminous class in my codebase.

Wrapping up

The most intriguing part about all of this is that hooks themselves are just functions! The official docs state that reusing stateful logic is one of the motiviations of hooks. The ability to wrap up state and all related functionality into bite-sized functions is going to be such a powerful pattern.

I saw a great tweet in a post from Dan Abramov that further harps on this:

"You can npm install an even greater percentage of your application code than before" is, I think, going to be a significant selling point for Hooks.

— Laurie Voss voted, did you? (@seldo) October 29, 2018

And not only will hooks make our code more reusable, but it will have a dramatic impact on the component tree. Imagine all of those providers, all of those render props and higher-order components slowly washing away. What a beautiful thought.