The header says "You're offline." Three pixels below it, the save button is still clickable, sending requests like nothing's wrong. Same navigator.onLine value. Same render. Two different answers on screen at the same time.

You didn't write a new bug. You wrote the hook everyone writes.

function useOnlineStatus () { const [ online , setOnline ] = useState ( navigator . onLine );

useEffect (() => { const update = () => setOnline ( navigator . onLine ); window . addEventListener ( ' online ' , update ); window . addEventListener ( ' offline ' , update ); return () => { window . removeEventListener ( ' online ' , update ); window . removeEventListener ( ' offline ' , update ); }; }, []);

return online ; }

Enter fullscreen mode

Exit fullscreen mode

It worked in every app you shipped before React 18.…