How to Use Custom Hooks in React

Picture this: You’re working on your React project, and you notice the same logic scattered across five different components. Sound familiar?

What if I told you there’s a way to write that logic once and reuse it everywhere, making your code cleaner, more maintainable, and frankly more impressive to your fellow developers?

Here comes the Custom Hooks - a React secret weapon that many developers know about but few truly master.

Custom hooks aren’t just a nice-to-have feature; they are a game-changer that can transform how you write React applications. Imagine never having to copy-paste the same useEffect logic again, or being able to share complex state management between components with a single line of code.

In this comprehensive guide, we’re going to dive deep into the world of custom hooks. But the why and when. By the end of this post, you’ll be creating your own custom hooks like a pro and wondering how you ever lived without them.

Prerequisite

This tutorial is designed for developers with brief experience with React, so you have to understand the basics of hooks like useState or useEffect.

Dependencies

To make the date used in the code playground human-readable I use the library date-fns/format.

How custom hook works

In this example, we will use a digital clock to demonstrate a basic usage of a custom hook, take a look at the code below:

import React from 'react';
import format from 'date-fns/format';

function Clock() {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = window.setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      window.clearInterval(intervalId);
    };
  }, []);

  return (
    <p className="clock">
      {format(time, 'hh:mm:ss a')}
    </p>
  );
}

The main purpose of a custom hook is to bundle multiple React components into one, Here is what it will look like:

function Clock() {
  const time = useTime();

  return (
    <p className="clock">
      {format(time, 'hh:mm:ss a')}
    </p>
  );
}

function useTime() {
  const [time, setTime] = React.useState(
    new Date()
  );

  React.useEffect(() => {
    // Effect logic
    const intervalId = window.setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      // Cleanup logic
      window.clearInterval(intervalId);
    };
  }, []);

  return time;
}

I've created a new function called useTime, and this function manages everything related to the time state, including the effect that keeps it up-to-date!

The function returns the time state variable, because that's what is necessary inside the Clock component:

const time = useTime();

There are two advantages to custom hooks:

1. Code organization. By moving the state/effect out of the component, it makes it easier to understand what the Clock component does. By giving the hook a name like useTime, we can make clear what it does.
2. Code reuse. Because I've moved this logic into its own function, I can share that function with other components. If any component needs to know what time it is, in a way which is automatically integrated with React state, all I have to do is import this function.

Important note: Custom hooks must start with the word "use". If we were to rename our custom hook to getTime, React's linting system would generate this warning message:

Remember when we were talking about the Rules of Hooks? The first rule is:

1. Hooks have to be called within the scope of a React application. We can't call them outside our React components.

The one exception to this rule is custom hooks. We're allowed to use React hooks like useState and useEffect in a function if that function is a custom hook.

We declare that a function is a custom hook by starting it with the word “use”, and making sure it obeys the Rules of Hooks (e.g. we can't call useTime conditionally, within our component).

Here is the code in action in the playground:

Wrap up

In this tutorial, we explored the power and flexibility of custom hooks in React. Here are the key takeaways:

• Custom hooks are a powerful way to extract component logic into reusable functions
• They must start with "use" to follow React's conventions and enable proper linting
• Custom hooks help improve code organization by separating concerns
• They enable code reuse across different components without duplicating logic

Remember that custom hooks are just JavaScript functions that can use other hooks, making them a flexible tool in your React development arsenal.