import { useEffect, useRef } from 'react';

function usePageShow(handler) {
  const handlerRef = useRef(handler);

  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  useEffect(() => {
    const onChange = (event) => {
      if (!document.hidden && handlerRef.current) {
        handlerRef.current(event);
      }
    };

    document.addEventListener('visibilitychange', onChange);
    return () => {
      document.removeEventListener('visibilitychange', onChange);
    };
  }, []);
}

export default usePageShow;
