Goal

I want to display a message based on whether the user is online or offline.

Summary of the Problem

• Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
• Problem is mainly caused by a setInterval() which calls a function every 6 second that changes the state (created using useState hook)

Expected Result:

A function is called with a set interval that checks whether a user is online or offline and then displays a message if a user is offline

What I have tried:

export default function CardContainer() {
 const [isOnline, set_isOnline] = useState(true);
 function InternetErrMessagenger() {
    if (navigator.onLine===true) set_isOnline(true);
    if (navigator.onLine===false) set_isOnline(false);
 }
 setInterval(InternetErrMessagenger(), 6000);
 return (
    // the <InternetChecker /> ponent contains a message that gets displayed when offline
    {isOnline !== true ? <InternetChecker /> : ""}
 )

A Glimpse of my effort:

NOTE: I was thinking of using the useEffect hook to solve this problem but could not make out how to do so. If you are thinking of any other way of addressing this problem, please share with me.

Goal

I want to display a message based on whether the user is online or offline.

Summary of the Problem

• Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
• Problem is mainly caused by a setInterval() which calls a function every 6 second that changes the state (created using useState hook)

Expected Result:

A function is called with a set interval that checks whether a user is online or offline and then displays a message if a user is offline

What I have tried:

export default function CardContainer() {
 const [isOnline, set_isOnline] = useState(true);
 function InternetErrMessagenger() {
    if (navigator.onLine===true) set_isOnline(true);
    if (navigator.onLine===false) set_isOnline(false);
 }
 setInterval(InternetErrMessagenger(), 6000);
 return (
    // the <InternetChecker /> ponent contains a message that gets displayed when offline
    {isOnline !== true ? <InternetChecker /> : ""}
 )

A Glimpse of my effort:

NOTE: I was thinking of using the useEffect hook to solve this problem but could not make out how to do so. If you are thinking of any other way of addressing this problem, please share with me.

• javascript
• reactjs

• Socket IO is the best way to develop chat and user online app. socket.io – Gautam Parmar Commented Jan 29, 2021 at 5:03
• @GautamParmar The OP wants to check the network status. – Nik Commented Jan 29, 2021 at 5:08
• Check developer.mozilla/en-US/docs/Web/API/NavigatorOnLine/onLine – Ajeet Shah Commented Jan 29, 2021 at 5:12
• 1 import useOnlineStatus from '@rehooks/online-status';, then inside your ponent: const isOnline = useOnlineStatus(); – Paul Commented Jan 29, 2021 at 5:23
• Thank you, Paul. This is the easiest way of solving this problem. – Dron Bhattacharya Commented Jan 29, 2021 at 11:23

3 Answers 3

You could do like this

1. useEffect will initiate the setInterval on ponent mount return function of the useEffect remove the interval event after opnent unmount

Codesanbox Demo

export default function CardContainer() {
 const [isOnline, set_isOnline] = useState(true);
 let interval = null;

 const InternetErrMessagenger = () => set_isOnline(navigator.onLine===true); // for do like this shortform

 
 useEffect(()=>{
    interval = setInterval(InternetErrMessagenger, 6000); // call the function name only not with function with call `()`
    return ()=>{
       clearInterval(interval) // for ponent unmount stop the interval
    }
 },[])
 
 return (
    // the <InternetChecker /> ponent contains a message that gets displayed when offline
    {isOnline !== true ? <InternetChecker /> : ""}
 )

Solved it on codesandbox using window.addEventListener('online') and window.addEventListener('offline') https://codesandbox.io/s/check-online-status-xdnos check out

Use this snippet code.

useEffect(()=>{
    window.addEventListener('online', function(e) {
        console.log('And we\'re back :).');
    }, false);
                
    window.addEventListener('offline', function(e) {
        console.log('Connection is down.');
    }, false);
},[])