Getting your hooks into React

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

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:

Image for post
Image for post
Adding console.log for React version

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

Image for post
Image for post

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:

Image for post
Image for post

(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

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:

Image for post
Image for post

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

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.

Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store