Modern web applications often need to adapt to varying network conditions. Handling changes in internet connectivity is crucial for providing a seamless user experience. In this article, we’ll explore how to dynamically change the state in a React application based on external internet connectivity, allowing users to interact with your app both online and offline.

Detecting changes in internet connectivity requires monitoring the network status and updating the application state accordingly. React provides a convenient way to manage state, and combining it with event listeners for network changes enables a responsive user interface.

1. Install Dependencies

Start by installing the react-use library, which provides a hook for monitoring network status:

npm install react-use

2. UseNetworkStatus Hook

Create a custom hook named useNetworkStatus.js to encapsulate network status logic:

// useNetworkStatus.js
import { useEffect, useState } from 'react';
import { useOnline } from 'react-use';

const useNetworkStatus = () => {
  const isOnline = useOnline();
  const [networkStatus, setNetworkStatus] = useState(isOnline);

  useEffect(() => {
    const updateNetworkStatus = () => setNetworkStatus(navigator.onLine);
    window.addEventListener('online', updateNetworkStatus);
    window.addEventListener('offline', updateNetworkStatus);

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

  return networkStatus;
};

export default useNetworkStatus;

3. Implement Dynamic State

Now, use the useNetworkStatus hook in your React component to dynamically change the state based on internet connectivity:

// App.js
import React from 'react';
import useNetworkStatus from './useNetworkStatus';

const App = () => {
  const isOnline = useNetworkStatus();

  return (
    

      
{isOnline ? 'Online' : 'Offline'}
      {/* Your application content goes here */}
    
  );
};

export default App;

4. Integration

Include the App component in your main application file (index.js or App.js). Ensure that the useNetworkStatus hook is in the same directory or adjust the import path accordingly.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Conclusion

Adapting your React application to external internet connectivity changes enhances user experience and ensures your app remains functional across various network conditions. By using the react-use library and creating a custom hook, you can effortlessly monitor network status and dynamically update the state.