Using Community Hooks

In the previous chapter, we implemented routing using the Navi library. We started by implementing pages, then defining routes and static links. Finally, we implemented dynamic links and accessed route information using Hooks.

In this chapter, we are going to learn about various Hooks that are provided by the React community. These Hooks can be used to simplify input handling, and implement React life cycles in order to simplify migration from React class components. Furthermore, there are Hooks that implement various behaviors such as timers, checking if the client is online, hover and focus events, and data manipulation. Finally, we are going to learn about responsive design and implementing undo/redo functionality using Hooks.

The following topics will be covered in this chapter:

• Simplifying input handling using the Input Hook
• Implementing React life...

Technical requirements

A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.

The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter08.

Check out the following video to see the code in action:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that have been provided. It is important that you write the code yourself in order to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Exploring the input handling Hook

A very common use case when dealing with Hooks, is to store the current value of an input field using State and Effect Hooks. We have already done this many times throughout this book.

The useInput Hook greatly simplifies this use case, by providing a single Hook that deals with the value variable of an input field. It works as follows:

import React from 'react'
import { useInput } from 'react-hookedup'

export default function App () {
    const { value, onChange } = useInput('')

    return <input value={value} onChange={onChange} />
}

This code will bind an onChange handler function and value to the input field. This means that whenever we enter text into the input field, the value will automatically be updated.

Additionally, there is a function that will clear the input field. This clear function is also returned...

React life cycles with Hooks

As we have learned in the previous chapters, we can use the useEffect Hook to model most of React's life cycle methods. However, if you prefer dealing with React life cycle directly, instead of using Effect Hooks, there is a library called react-hookedup, which provides various Hooks, including Hooks for the various React life cycles. Additionally, the library provides a merging State Hook, which works similarly to this.setState() in React's class components.

The useOnMount Hook

The useOnMount Hook has a similar effect to the componentDidMount life cycle. It is used as follows:

import React from 'react'
import { useOnMount } from 'react-hookedup'

export default function...

Various useful Hooks

In addition to life cycle Hooks, react-hookedup also provides Hooks for timers, checking the network status, and various other useful Hooks for dealing with, for example, arrays and input fields. We are now going to cover the rest of the Hooks that react-hookedup provides.

These Hooks are as follows:

• The usePrevious Hook, to get the previous value of a Hook or prop
• Timer Hooks, to implement intervals and timeouts
• The useOnline Hook, to check whether the client has an active internet connection
• Various data manipulation Hooks for dealing with booleans, arrays, and counters
• Hooks to deal with focus and hover events

The usePrevious Hook

The usePrevious Hook is a simple Hook that lets us get the previous...

Responsive design with Hooks

In web apps, it is often important to have a responsive design. Responsive design makes your web app render well on various devices and window/screen sizes. Our blog app might be viewed on a desktop, a mobile phone, a tablet, or maybe even a very large screen, such as a TV.

Often, it makes the most sense to simply use CSS media queries for responsive design. However, sometimes that is not possible, for example, when we render elements within a canvas or Web Graphics Library (WebGL). Sometimes, we also want to use the window size in order to decide whether to load a component or not, instead of simply rendering it and then hiding it via CSS later.

The @rehooks/window-size library provides the useWindowSize Hook, which returns the following values:

• innerWidth: Equal to the window.innerWidth value
• innerHeight: Equal to the window.innerHeight value
• outerWidth...

Undo/Redo with Hooks

In some apps, we want to implement undo/redo functionality, which means that we can go back and forth in the state of our app. For example, if we have a text editor in our blog app, we want to provide a feature to undo/redo changes. If you learned about Redux, you might already be familiar with this kind of functionality. Since React now provides a Reducer Hook, we can reimplement the same functionality using only React. The use-undo library provides exactly this functionality.

The useUndo Hook takes the default state object as an argument, and returns an array with the following contents: [ state, functions ].

The state object looks as follows:

• present: The current state
• past: Array of past states (when we undo, we go here)
• future: Array of future states (after undoing, we can redo to go here)

The functions object returns various functions to interact with...

Finding other Hooks

There are many other Hooks that are provided by the community. You can find a searchable list of various Hooks on the following page: https://nikgraf.github.io/react-hooks/.

To give you an idea of which other Hooks are out there, the following features are provided by community Hooks. We now list a couple more interesting Hooks provided by the community. Of course, there are many more Hooks to be found:

• use-events (https://github.com/sandiiarov/use-events): Various JavaScript events that have been turned into Hooks, such as mouse position, touch events, clicking outside, and so on.
• react-apollo-hooks (https://github.com/trojanowski/react-apollo-hooks): Use Apollo Client (a caching GraphQL client) with React Hooks.
• react-use (https://github.com/streamich/react-use): Various Hooks to deal with sensors (useBattery, useIdle, useGeolocation, and so on), UI (useAudio...

Summary

In this chapter, we first learned about the react-hookedup library. We used this library to simplify input handling with Hooks in our blog app. Then, we had a look at implementing various React life cycles with Hooks. Next, we covered various useful Hooks, such as the usePrevious Hook, Interval/Timeout Hooks, the Online Status Hook, data manipulation Hooks, and the Focus and Hover Hooks. Afterward, we covered responsive design using Hooks, by not rendering certain components on mobile phones. Finally, we learned about implementing undo/redo functionality and debouncing using Hooks.

Using community Hooks is a very important skill, as React only provides a handful of Hooks out of the box. In real applications, you will probably be using many Hooks that are provided by the community, from various libraries and frameworks. We also learned about various community Hooks that...

Questions

In order to recap what we have learned in this chapter, try answering the following questions:

1. Which Hook can we use to simplify input field handling?
2. How are the componentDidMount and componentWillUnmount life cycles implemented using Effect Hooks?
3. How can we use Hooks to get the behavior of this.setState()?

4. Why should we use timer Hooks instead of calling setTimeout and setInterval directly?
5. Which Hooks can we use to simplify dealing with common data structures?
6. When should we use responsive design with Hooks, versus simply using CSS media queries?
7. Which Hook can we use to implement undo/redo functionality?
8. What is debouncing? Why do we need to do it?
9. Which Hooks can we use for debouncing?

Further reading

If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:

• react-hookedup library documentation: https://github.com/zakariaharti/react-hookedup
• window-size library documentation: https://github.com/rehooks/window-size
• use-undo library documentation: https://github.com/xxhomey19/use-undo
• use-debounce library documentation: https://github.com/xnimorz/use-debounce.
• Collection of React Hooks: https://nikgraf.github.io/react-hooks/
• Learning Redux book published by Packt for more in-depth information about undo/redo functionality: https://www.packtpub.com/web-development/learning-redux