Examples of when to create custom React hooks

custom-hooks-clock-example.tsx

import React, { useEffect, useState } from 'react';

// Some component that implements, among many features, a clock display:
export function HomePage() {
    const [time, setTime] = useState(new Date().toLocaleTimeString());
    const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);

    useEffect(() => {
        const id = setInterval(() => {
            setTime(new Date().toLocaleTimeString());
        }, 1000);
        setTimerId(id);

        return () => {
            if (timerId) clearInterval(timerId);
        };
    }, []);

    return (
        <div>
            <h1>Welcome to the Home Page</h1>
            <p>It is {time}</p>
        </div>
    );
}

// Now some other component needs the same feature, can duplicate the react state/effect...
export function AboutPage() {
    const [time, setTime] = useState(new Date().toLocaleTimeString());
    const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);

    useEffect(() => {
        const id = setInterval(() => {
            setTime(new Date().toLocaleTimeString());
        }, 1000);
        setTimerId(id);

        return () => {
          if (timerId) clearInterval(timerId);
        };
    }, []);

    return (
        <div>
            <h1>Welcome to the About Page</h1>
            <p>It is {time}</p>
        </div>
    );
}

// Or abstract the timer state/effect into a custom hook so we can share the logic between components:
export function useClockDisplay() {
    const [time, setTime] = useState(new Date().toLocaleTimeString());
    const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);

    useEffect(() => {
        const id = setInterval(() => {
            setTime(new Date().toLocaleTimeString());
        }, 1000);
        setTimerId(id);

        return () => {
          if (timerId) clearInterval(timerId);
        };
    }, []);

    return time;
}

// Now the page components can use the custom hook to get the clock display without duplicating logic:
export function HomePageWithHook() {
    const time = useClockDisplay(); // state and effect are setup here

    return (
        <div>
            <h1>Welcome to the Home Page</h1>
            <p>It is {time}</p>
        </div>
    );
}

export function AboutPageWithHook() {
    const time = useClockDisplay();

    return (
        <div>
            <h1>Welcome to the About Page</h1>
            <p>It is {time}</p>
        </div>
    );
}