Custom Hook for delaying side effects declaratively

useEffectWithDelay.js

function useEffectWithDelay({ condition = false, func = () => {}, delay = 1000 }) {
  useEffect(() => {
    if (condition) {
      const timeout = setTimeout(func, delay);

      return () => {
        clearTimeout(timeout);
      };
    }
    return undefined;
  }, [condition, delay, func]);
}

You can now also find this in the npm registry, as part of the @paulrberg/react-hooks package. Install it as usual: yarn add @paulrberg/react-hooks or npm install @paulrberg/react-hooks.