Can I Use React Hooks Yet?

Update: On February 06, 2019, React 16.8 introduced Hooks as a stable feature!

The short answer is... Yes. When I originally wrote this article we were still in beta, now React 16.8 has released Hooks as a stable feature, you should be making branches of your code and starting to play around with converting small components over to Hooks slowly working your way through, this is the best way to get started learning. Also if you have written any tutorials in the past 6 months that do not use Hooks a good exercise could be to simply convert that older article over to Hooks. Anything to get started, the time has come!

Not everyone is going to immediately switch over to Hooks, however; by going through the motions of refactoring a few of them, you will pinpoint the easy and hard places to change.

Obviously this work would start at the component level. A simple example would be for my company, going through and updating StackBlitz demos to show how to use our components with Hooks. The simplest place to start would be something like our KendoReact DropDownButton component, which our current samples show only how to use them via a Wrapper Class like in this StackBlitz demo:

StackBlitz Demo: Class Style Syntax

But with just the basics that I learned in the first (State & Effect) article below. I can swap that class style StackBlitz demo over to Hooks by simply installing the latest beta version of React that includes Hooks:

npm i react@next react-dom@next

And importing useState:

import React, { useState } from 'react';

At this point I can refactor the class to a functional component, get rid of the references to .this and the constructor. And replace the statement using setState().

Instead and as you can see in the Refactored StackBlitz Demo, we can create the state variable and it's update method in the same call we make to useState().

const [value, setValue] = useState('Components');

We can set any default state value if needed. And then create a method that we can call that in turn calls the update method. update our component to call this new changeValue() function and we have made the demo much simpler than before using basic Hooks.

const ButtonContainer = () => {
  const sizes = ['Homepage', 'Components', 'Changelog', 'Pricing'];

  const [value, setValue] = useState('Components');
  const changeValue = (event) => setValue(event.target.value);

  return <DropDownList data={sizes} value={value} onChange={changeValue}/>
}

One place you can find more information on Hooks is in this exhaustive full-length step-by-step guide. I have the examples above and sections on State and Effects, Context, Reducers, Custom Hooks and Managing Control State of Components.

I really suggest cracking Hooks open and playing around with the simple stuff. It's a gateway to the more advanced stuff you can do and an eye opening experience that makes me feel so glad to be a react developer and have the time to research and learn it is so valuable to me. I hope it is for you also!

There are certain things that come in programming which are just ground breaking changes in technique and syntax, sometimes even bigger changes that make you fell like things are really changing for the better. This is one of those things in my mind. I'm so happy that React took it's time with this and it feels like they hit a home run here with Hooks.

Below are a few great resources I have used along my way:

Documentation Tutorial
Making Sense of React Hooks