This post goes over how to set a delay using a React hook.

useDelay

Create a hook with setTimeout:

// useDelay.ts
import { useEffect, useState } from 'react';

/**
 * Triggers a delay after the component mounts.
 *
 * @param delay - The delay in milliseconds.
 * @returns A boolean indicating whether the element is visible.
 */
export function useDelay(delay: number): boolean {
  const [state, setState] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setState(true), delay);
    return () => clearTimeout(timer);
  }, [delay]);

  return state;
}

To use the hook:

// App.tsx
import { useDelay } from './useDelay';

function App() {
  const isDelayFinished = useDelay(3000); // 3 seconds

  return <p>Delay finished? {isDelayFinished}</p>;
}