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:
Oldest comments (7)
Yes you can github.com/facebook/react/pull/14679
Let's make sure nobody misunderstands this PR, this is merely a preparation to turn hooks on inside React, but you still cannot use them right now inside an application without installing the alpha version, which many are actually using in production (so I have heard). I think what this PR shows is that .. Shit's ready to go and the next release should have them turned on, this is a big deal because the last release that shipped 16.7, was suppose to have Hooks and it did not, so this is just a way of them hinting that it's now ready and the next release will be game on!
Yes you can :)
The hooks boy-o, the hooks!!!
Hooks, schmooks....there will be another best practice coming down the pike in mere months, I'm sure. Maybe this (just kidding, it's my own hack): github.com/dexygen/withMethods
I don't agree about another way that at least is supported by the core team, however; I do like your method registry idea. I think it is healthy to say: "How would I do this differently" as well as go even further and try to flesh out an example and share it with the community. I commend you for asking questions and presenting alternatives.
The reason I don't think anything else will come that will replace it is that something like useState and useEffect are abstractions over already existing things like setState and lifecycle hooks which in order to provide for us the team has to make these work under the hood and it took a lot off time. We can think back to React Fiber as the start of a lot of this work IMHO. Would love to hear more of your ideas though. I'm new to React, but I'm learning more and more each day!
This comment aged well, jk...