Getting your hooks into React

Chris B
Nov 12, 2018 · 4 min read

Writing your first React hook. How to setup a project to write your first hook.

If you want to view the end result the repository is here.

Everyone is talking about Hooks at the moment it seems and this is great, getting the community involved in the development of React and it’s new features is definitely one of its strengths. Hooks are just in alpha at the present and Dan Abramov suggests a note of caution before launching into them, but they are shiny and new so who doesn’t want to have a play!

Just before we do it’s worth checking out their announcement at React Conf 2018 by Sophie Alpert and Dan Abramov followed by a deeper dive by Ryan Florence here:

Along with the article, Making Sense of React Hooks which explains some of the reasons for using them and their proposed uses.

Setup

To get the project setup in the easiest way for writing our first hook I’m going to use create-react-app to make life simple.

So in the root of your working folder:

create-react-app react-hooks-example

Then open the folder in a code editor. I use VSCode.

The current version of React in use is 16.6, which you can check by adding the following to src/App.js and then using the yarn start command to start the project:

Adding console.log for React version

This will print the current React version in the developer tools console, in this case 16.6.1:

Hooks are currently available in the 16.7 alpha so to change to this version I used:

yarn add react@next react-dom@next

You’ll need to restart the app once the dependencies have installed, but you should then get:

(Optional) If you are using eslint there is a plugin to help identify any issues with your hooks which you can use by:

yarn add eslint-plugin-react-hooks@next --dev

Then adding the following .eslintrc file to the root of your directory:

.eslintrc using React hooks

Writing your First Hook

Now for the fun part!

Create a new file called Example.js in the src folder and write the following:

Remove the demo setup in the App.js and replace with the below:

And you should now have:

Click the button as you have now written your first Hook 🎉🎉🎉

This is a simple usage of the useState hook which declares a state variable count and a function to update the state setCount.

You can now add additional Hooks and see what everyone is talking about. For example it’s easy to add the useEffect hook to update the document title by updating the Example.js to:

This now gives an easy setup to learn Hooks. There are also plenty of other resources out there:

A useful list of Hook related resources.

A daily React Hook, with some pretty cool example hooks.

There is also the proposal to add Hooks which can be found here:

Conclusion

I hope this has been a helpful demo of how to test out React’s new proposed feature. You can find a repository here which contains the result of the process above.

Thanks for reading. If you liked the story please hit the “Follow” button or clapping. I’m going to start adding articles each week in which I hope to be exploring more features in various languages and adding further tutorials. Many Thanks.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade