One of the more difficult things for someone getting into react is understanding what it means to write your own react hook. It's often discussed in courses but I don't think the true process is ever fully explained to the point where you, as a newbie, would feel comfortable writing your own. So today, we'll dive into what are react hooks, how to use them, and what it would take to write your own.
In the official react docs, hooks are described as things designed to help you use React features without the need of a class component. Personally, I like view them as supercharged functions that allow me to do special things. From my understanding, there are about 10 hooks out of the box that come with React. Some of the more common ones include the useState hook and the useEffect hook. Those are the more popular ones because the main things you'd like to do in React are based on state update or to create an effect when something is updated. Hooks at the end of the day, allow you to do these things with a cleaner feel and lessen the need to keep track of the underlying things to accomplish the necessary feat.
Now that we know what hooks are, let's take a quick dive on how to use them. As these are "supercharged functions", they are used very similar to any regular javascript function.
The first step is to import the hook from react or the library it's originated from
import {useState} from 'React'
Then call it within your component
const [initialState, setInitialState] = useState([])
That simple! All that's being done is calling the useState hook from the react library, then using array destructuring to set an initial state value and a function which allows you to update this state value as needed. Throughout your component, the state can be updated whenever needed using the setInitialState function.
Now that we've had a quick understanding of what hooks are and how to use them, let us dive into what this article is all about, which is the ability to write your own "supercharged function". I am a firm believer in learning through example, so I will use a personal hook I once wrote, as an example to walk through how to write your own hook. Before digging into it, let's outline the problem I was facing. I wanted to showcase a different component based on the screen size. While I can do this with css, it's often difficult to change to a new component entirely. In stepped, my "useResizer" hook. The goal of the function is to keep track of the screen as the user resizes the screen.
import { useState, useEffect } from "react";
const useResizer = () => {
const [windowWidth, setWindowWith] = useState();
const updateWidth = () => setWindowWith(window.innerWidth);
useEffect(() => {
setWindowWith(window.innerWidth);
window.addEventListener("resize", updateWidth);
return () => window.removeEventListener("resize", updateWidth);
}, []);
return windowWidth;
};
export default useResizer;
Alright, so what's going on here. As you can see, it looks very similar to any regular react component to begin with, importing react hooks at the top and defining the name of my hook as "useResizer". The first step is to define an initial state, which will then be the window width but starts empty when the app starts. The next step is to define a function, which I will use to update the state of the function, in other words this function is built to update the window width. After defining this function, it was time to use it. In my useEffect hook/function, I then used the updateWidth function to constantly change the value of the windowWidth state. Finally, I return that value within this function. With everything set up, I am able to use this function throughout my app. To use it, it's similar to how I would use any other react hook, I import it and use the returned value to decide what I want to do.
1. Import the function from the file I created it in:
import useResizer from "../../hooks/useResizer";
2. Set a default value, similar to useState or other react hooksconst screenSize = useResizer();
3. Use the returned value to decide what to do within the app{screenSize < 768 ? <MobileNav/> : <Navbar/>}
It's as simple as it seems. At the end of the day, one of the harder things to do is to understand what hooks are, how they're used and how to build them. Through this article, we briefly touched base on those subjects as well as walked through building one from scratch. At the end of the day, hooks are supposed to be additional tools to help you do everything you can do in a regular class based component, in a functional component. Understanding them beyond the technical definition helps with building your own. If you have the understanding of how to write a regular function, you too can write a custom react hook!