import { useEffect, useState } from 'react';

const getOnlineStatus = () => {
    return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
};

const useOnline = () => {
    const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus());

    useEffect(() => {
        const goOnline = () => setOnlineStatus(true);
        const goOffline = () => setOnlineStatus(false);

        window.addEventListener('online', goOnline);
        window.addEventListener('offline', goOffline);

        return () => {
            window.removeEventListener('online', goOnline);
            window.removeEventListener('offline', goOffline);
        };
    }, []);

    return onlineStatus;
};

export default useOnline;

import { useEffect, useState } from 'react';

const getOnlineStatus = () => {
    return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
};

const useOnline = () => {
    const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus());

    useEffect(() => {
        const goOnline = () => setOnlineStatus(true);
        const goOffline = () => setOnlineStatus(false);

        setOnlineStatus(getOnlineStatus());

        window.addEventListener('online', goOnline);
        window.addEventListener('offline', goOffline);

        return () => {
            window.removeEventListener('online', goOnline);
            window.removeEventListener('offline', goOffline);
        };
    }, []);

    return onlineStatus;
};

export default useOnline;

Read online status in effect
Read online status in effect

If the online status would have changed between render and effect, it'd
use a stale value. Re-read it to make sure it's up-to-date.
