Trying Out React Hooks

Trying Out React Hooks

Some Background.

One of the things that happens to me fairly often when I write React apps is having the “Function Component” (f.k.a. “Stateless Functional Component”) as my go-to when knocking stuff out.

Inevitably, I’ll end up getting to the point where I need to introduce state or make use of the Component Lifecycle Methods. This means that I have to go through the process of rewriting the Function Component to be a Class-Based component. It’s kind of annoying.

Actually, what’s more annoying is when I try to be smart and avoid this pifall by using class-based components everywhere then I get annoyed because I end up not using state or lifecycles and then I’ve written a bunch of extra stuff and then I end up refactoring to function components.

ANYWAYS.

At React Conf 2018, the team announced a new alpha feature called Hooks.

My friend Dave Ceddia has written an awesome series of articles about Hooks that I highly recommend going through.

But how do I try it?

My go-to for working with React is using create-react-app, but it (rightfully) doesn’t install prerelease versions by default.

In this case, I found myself asking:

How do I use prelease versions of React with create-react-app?

The first thing to do is create a new app:

npx create-react-app alpha-test-app

After it does its thing, run

yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

When you use the @, you can supply a specific version or tag to be installed.

With the right version of React installed, all the Hooks stuff is available for use.

I’m looking forward to really trying Hooks out!

Check out my other articles, or sign up for my newsletter:

No spam. Just code stuff, unsolicited music recommendations, etc.