Why React’s alpha feature Hooks is awesome

React Hooks

React, a popular alternative for JavaScript frameworks, experienced a year of massive community growth. Given the enthusiasm for its alpha feature Hooks, that rids your codebase of classes, it’ll become an even more pleasing resource for frontend developers. React + D3v4 author Swizec Teller elaborates on the value of the feature, joining our live interview channel within the React Brasil Slack community.

interview swizec teller reactjs hooks classes

Sebastiaan van Essen (interviewer) [6:04 PM]:

Do you consider yourself to be a frontend programmer in the first place? Is that what drives you the most?

Swizec [6:05 PM]:

Really I'd say I'm full stack with a love for javascript and the frontend because I believe that's where a lot of complexity has moved to in recent years. When I started on the web in those early PHP days there was no such thing as a frontend developer. This was before even jQuery existed.
And nowadays we're getting to the point with serverless technologies that anyone can be a full stack (web) developer with almost no special backend knowledge required
And I think that's awesome.

Sebastiaan van Essen (interviewer) [6:07 PM]:

Why did you choose to embrace React?

Swizec [6:07 PM]:

The component model.
When React came out it was everything I always wanted in a javascript framework. I've used Backbone before, built a lot of monstrosities with jQuery.
Then React comes along and it's everything I could ever dream of. You write JavaScript, you package functionality into HTML-like constructs, and you can use them anywhere on your page or app and know exactly how they're giong to behave.
It really frees up a lot of mental resources and makes webdev a lot like playing with Legos.

Sebastiaan van Essen (interviewer) [6:10 PM]:

Lately you decided to write about a new concept within React, Hooks. Why did you write about it?

Swizec [6:11 PM]:

Because it's the new hotness of course ?

Sebastiaan van Essen (interviewer) [6:11 PM]:

Just because you love to inform react engineers about new hotness, or do you really like the change?

Swizec [6:11 PM]

No I think hooks are a great addition to the React ecosystem. They're going to make our apps a lot simpler.

Sebastiaan van Essen (interviewer) [6:11 PM]:

Ok. Why?

Swizec [6:12 PM]

I've already been teaching engineers to write functional code primarily and Hooks makes that approach even easier.

What's more, it makes functional components as flexible and useful as class-based components which is just wonderful.
And once you get used to it a little, you see it actually makes your code easier to read and understand

That readability is very important when working on real world projects.

Sebastiaan van Essen (interviewer) [6:13 PM]:

Does it make React much more appealing to JS developers, do you think?
Swizec [6:13 PM]

That's hard to say. I think it remains to be seen.

Hooks are still in alpha and you shouldn't use them in real code just yet. Even though a lot of people are.
If you look at hooks right now and have zero experience with React, you probably won't even notice why they're great and what problems they solve

You'll just think it's weird that functions are defined within functions.

But that's actually how we used to write javascript a few years ago. Functions inside functions were the name of the game.

Sebastiaan van Essen (interviewer) [6:15 PM]:

Do you mostly sense excitement around you, regarding Hooks?
Swizec [6:16 PM]:

Soooo much excitement. I think the JavaScript community just loves it whenever anything new happens.
And Hooks are a big shift so everyone wants to write about it.

Sebastiaan van Essen (interviewer) [6:18 PM]:

Are these necessary changes to keep in front of Vue.js, a fast upcoming framework whose community seems to grow even faster?

Swizec [6:19 PM]:

It's hard to say. I think people who like React are going to stick with React, people who like Vue are going to stick there.

I don't see a lot of cross pollination.

Sebastiaan van Essen (interviewer) [6:19 PM]:

I mean, the React community is very big, healthy and grows fast, but what you say is right: new excitement can move JS engineers in another direction relatively quickly.
Swizec [6:19 PM]:
Every React person who tries Vue says they hate its ergonomics and don't enjoy working with it.

And every Vue person I know who has tried React says roughly the same.

Sebastiaan van Essen (interviewer) [6:20 PM]:

Ok, back to React Hooks itself.
 Since the publication of your blog repos popped up in the landscape. Have you seen some great ones already?
swizec [6:21 PM]:

Hm that's a tough question.

I've seen a lot of great gists and carbon.now.sh screenshots on Twitter.

And it looks like every major library is pushing out updates and rewrites to work with Hooks.

Sebastiaan van Essen (interviewer) [6:22 PM]:

Can you give examples of great gists, in your opinion?
Swizec [6:23 PM]

Heh, I don't have them bookmarked so they'd be hard to find right now.

Here's a good overview repository someone is building that lists a bunch of Hooks.

One of the cool things about hooks is that it's very easy to make your own.

Sebastiaan van Essen (interviewer) [6:23 PM]:

Thanks, that’s a great overview indeed, I know it.
Swizec [6:24 PM]:

So I think as more and more people start using them, we're going to see ever more opensourced hooks as people solve their little issues.

Like, I built a `useD3` hook that lets me wrap random dataviz code in a React component.

Sebastiaan van Essen (interviewer) [6:25 PM]:

Nice. Can you share it with us?
Swizec [6:25 PM]:

https://d3blackbox.com/

Sebastiaan van Essen (interviewer) [6:25 PM]:

Are there more custom Hooks made by you?

Swizec [6:26 PM]:

This is the only open source one so far.
I did build a `useFetch` hook once and thought about open-sourcing it until I saw better ones exist already.

Sebastiaan van Essen (interviewer) [6:26 PM]:

Planning on building some other(s)?
Swizec [6:27 PM]:

I hope so!
Need to come up with more fun project ideas and build them with Hooks.
I'm sure that's going to breed a bunch of hooks ?

Sebastiaan van Essen (interviewer) [6:28 PM]:

In terms of time spend on coding, from a senior React engineer perspective, have you experienced you saved a noteworthy amount of time? If you compare it with the traditional classes approach?
Swizec [6:29 PM]:

I don't think I've built anything big enough yet to see that effect. Yes there's less typing, but my typing speed is pretty fast so that's not really a problem

It definitely helps with smaller bundle sizes and once you get to _maintaining_ your code it's faster because there's less to read
So yeah if I had a big enough project for long enough, I think it would be a lot faster with Hooks.

Sebastiaan van Essen (interviewer) [6:30 PM]:

Yes exactly, you can faster comprehend in that case
Swizec [6:30 PM]:

Yep
react hooks complicating chat slack
react new year 2019 new features
end slack conversation

Originally published at Jexia.