According to the results of the annual survey of the State of Javascript, it doesn’t seem like React nor Typescript is going anywhere anytime soon so it’s worth taking some time and learning how they work!

React hooks have revolutionized the way we can build React components as they tend to be considerably more intuitive than Class Components. However, one feature that isn’t taken advantage of nearly as much as it should be, is the ability to create custom hooks!

Custom hooks let us abstract away the logic of react components and re-use them! I suggest only doing this with logic that actually gets reused a ton throughout your web application.

More info about hooks can be found here.

For the sake of this article, the example I’m going to be creating is a useToggle hook! Toggling something in the UI is quite common so we should get a lot of mileage out of this one.

Building the hook

First, let’s create the file useToggle.ts , and let’s build the skeleton for our hook. All hooks must begin with the word use!

A toggle hook will typically just rely on toggling a boolean state from true to false and vice versa, however, to make it more complete let’s add some additional, optional, functionality to the hook where we can completely set it to false or true.

Let’s create the state and the skeleton of the functions:

You should import the appropriate hooks from React itself, in this case, useState and useCallback.

import {useState, useCallback } from 'react';

The useState hook has access to the previous state, this is generally safer to use so we’ll just toggle it with this functionality. The other two functions, close and open, will set the state to either true or false directly. The state of the toggle and the three functions will get returned in an array.

Typescript

Last but not least, let’s give our hook some type-safety by letting the function know what we are expecting to return.

We return an array with the internal state of the hook, and the 3 functions to alter the state!

As a little extra we can add an initial state to the hook in case we want it to start off as closed or opened:

Conclusion

And that’s it! Hooks are a great way to abstract logic used in react components.

Here’s an example of the hook in action:

More content at Relatable Code.

If you liked this feel free to connect with me on LinkedIn or Twitter

Originally published at https://relatablecode.com on March 6, 2022.