Creating a Custom ‘useTimeout’ Hook in React

In React, managing time-based side effects like ‘setTimeout’ can be cumbersome, especially when trying to adhere to a declarative style of programming. To address this, we can create a custom ‘useTimeout’ hook that encapsulates the ‘setTimeout’ functionality in a declarative manner. This article will guide you through the process of implementing the ‘useTimeout’ hook.

What is ‘useTimeout’?

The ‘useTimeout’ hook is a custom React hook that allows you to use the ‘setTimeout’ function declaratively. By using this hook, you can schedule a callback to be executed after a specified delay, and React will handle the cleanup for you.

Implementing the ‘useTimeout’ Hook

Let’s break down the implementation of the ‘useTimeout’ hook step by step.

Step 1: Create the Hook

Create a custom hook that takes a ‘callback’ function and a ‘delay’ (in milliseconds) as arguments.

import React from 'react';

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  // Remember the latest callback.
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the timeout.
  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      const id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

Step 2: Use the Hook in a Component

Now that we have our ‘useTimeout’ hook, let’s use it in a React component. In this example, we’ll create a component that updates a counter every second.

import React from 'react';
import ReactDOM from 'react-dom/client';

const OneSecondTimer = () => {
  const [seconds, setSeconds] = React.useState(0);

  useTimeout(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<OneSecondTimer />);

Explanation

1. useRef Hook:
   
   • ‘const savedCallback = React.useRef()’;
   • We use ‘useRef’ to keep a mutable reference to the latest version of the ‘callback’ function. This allows us to access the latest callback without re-running the effect.
     
2. useEffect Hook for Callback:
   
   • ‘React.useEffect(() => { savedCallback.current = callback; }’, ‘[callback])’;
   • This ‘useEffect’ updates the ‘savedCallback’ reference whenever the ‘callback’ function changes.
     
3. useEffect Hook for Timeout:
   
   • ‘React.useEffect(() => { … }, [delay])’;
   • This ‘useEffect’ sets up the ‘setTimeout’ with the specified delay. It also returns a cleanup function to clear the timeout if the component unmounts or if the delay changes.
     
4. Tick Function:
   • The ‘tick’ function calls the latest version of the ‘callback’ stored in ‘savedCallback.current’.

Use Case: One Second Timer

In the ‘OneSecondTimer’ component:

• We initialize a state variable ‘seconds’ to ‘0’.
• We use the ‘useTimeout’ hook to increment the ‘seconds’ state every second.

Wrapping It Up

The ‘useTimeout’ hook provides a declarative way to handle ‘setTimeout’ in React components. By encapsulating the logic within a custom hook, you can manage time-based side effects more effectively and keep your components clean and readable. This approach leverages React’s hooks API to ensure proper setup and cleanup, making your code more robust and easier to maintain.