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!
Along with the article, Making Sense of React Hooks which explains some of the reasons for using them and their proposed uses.
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:
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:
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:
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:
Awesome React Hooks. Contribute to rehooks/awesome-react-hooks development by creating an account on GitHub.
A useful list of Hook related resources.
We bring you one new React hook code recipe per day so you can learn how React hooks work and feel more comfortable…
A daily React Hook, with some pretty cool example hooks.
There is also the proposal to add Hooks which can be found here:
RFC: React Hooks by sebmarkbage · Pull Request #68 · reactjs/rfcs
In this RFC, we propose introducing Hooks to React. See the RFC and the documentation for more details…
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.