A hook that gives you a boolean that you can use to delay rendering of your component.

Use Render Delay Hook for React

import { useEffect, useState } from 'react';

/**
 * Adds a render delay variable that can be used on components
 * @param timeout
 * @param dependency
 * @example const visible = useRenderDelay(open, 2500);
 */
const useRenderDelay = (dependency: boolean, timeout = 1000): boolean => {

  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (dependency) {
      setTimeout(() => setVisible(true), timeout);
    }
    return () => {
      setVisible(false)
    }
  }, [dependency]);

  return visible;

}

export { useRenderDelay }