Leverage an Existing Community Hook in Your React Function Component
Since the announcement of React Hooks a lot of community hooks have already been created. We will take a look at a list of these hooks and leverage a couple of them to use in our web application. The site https://nikgraf.github.io/react-hooks/ is a great round-up of current community hooks that you can use today.
Instructor: [00:00] We'll start up our dev server and run a little React app. It uses the deprecated battery status API. That still exists in Chrome at the moment. Let's take a look at the code. We'll open the playground function component. The majority of the code has been extracted out in a custom React hook called use battery.
[00:21] With the announcement of the hook's proposal, several sites have cropped up that keep a list of community-developed custom hooks that have been created so far. One such site, called Collection of React Hooks, created by Nik Graf, lists hooks from various sources in a searchable.
[00:37] If we search for battery, there's a community custom hook already created that we could use. You could also find ones for local storage, for document title, and much more.
[00:47] In this case, let's replace our custom hook with the one listed here from React-use. If we come back into our code and open the integrated terminal, we could NPM install React-use. Once installed, we can import use battery from React-use.
[01:07] As long as our APIs are the same, we should be able to delete our custom hook. It should just work. We could also delete the import for use states and use effect since those are now encapsulated in the community hook. Now, if we kick back up our dev server, we'll see on the right that, sure enough, it works as it did before.
[01:30] Next, let's see if we could find a community hook for our to-do list app. We'll switch our app to run our to-do list. Do you see how the title updates if there are incomplete to-dos? Let's see if we could replace our custom use document title hook with one from the community.
[01:47] The code for this is in the to-do list.hook.js file. Let's try importing use title as use document title so that it matches what we already had from React-use. Then we could go down and delete our version of the custom hook. If all goes well, title should still update as we mark off items. Sure enough, it does. Yay for community reuse!