A Guide To Handling Internet Disconnection In React Applications.
Have you ever tried clicking on a button or access a service on any application numerous times without getting any feedback?
Such could leave you with some unanswered questions like “is my request being processed?”, “is the application server down?”, etc. and sometimes it might be due to losing your internet connection. This could decrease user retention rate on your application if proper attention is not paid to interactivity and how it affects your users.
This article will provide you with a means to handle changes to your users’ internet connection on your application.
What we will build
A webpage in React that displays a list of images.
What you need to know
- Familiarity with React components.
- Familiarity with ES6.
Let’s dive right in.
We will be using the create-react-app package to bootstrap our application.
Open your terminal and run:$ npm i -g create-react-app (Do this if you do not have the create-react-app package installed).Bootstrap your application using:$ create-react-app name-of-your-application
When that is done, open the folder you just created in your editor of choice. You should have the following folder structure.
Create a folder inside src (I called mine “helper”) and add images.js. This file will hold an array of images that we want to render on the webpage.
Add the following to the image file created:
Replace the content of App.css with the styles below:
Do likewise to the index.css file:
The concept of higher order components empowers us to create abstractions over a component that can be easily reused on your platform. For the sake of brevity, I would suggest you check out this article, https://alligator.io/react/higher-order-components/ on HOCs.
Create another folder in the src folder called Hoc and a file called NetworkDetector.jsx inside it.
Paste the following content in the file:
In the component above, we have thehandleConnectionChange method that updates the isDisconnected property in our local state as a result of a change in the Javascript “navigator.onLine” property which returns a boolean. This boolean is changed and updated accordingly based on the browser’s ability to fetch any resource on the internet. The window.online and window.offline event listener notices this change and fires the handleConnectionChange method.
The navigator.onLine property is not foolproof and one concern is that a machine can be connected to a network or a virtual one and not have internet access.
How has this been addressed?
An additional check was added to if (condition === 'online') which sends a request to google.com with an interval of two seconds. This check helps to ensure that the browser is not only online but has internet access. The setInterval is also cleared using the clearInterval method once the online status is confirmed to avoid sending another request.
Why choose google.com?
The reason behind sending the get request to google.com instead of any random platform is because it has great uptime. The idea here is to always send the request to a service that is always online. If you have a server, you could create a dedicated route that can replace the google.com domain but you have to be sure that it has an amazing uptime.
Replace the content of App.js with the following:
The App.js component was bounded to, and wrapped with the NetworkDetector by doing NetworkDetector(App). If you do not want to wrap your HOC’s this way, you could achieve similar results by wrapping the HOC in your route declaration when using the “react-router-dom” package.
At this point, you should have access to the gif below by running yarn start in the directory of the app on a terminal.
Below, is a code sandbox I created that you can play around with.
A quick rundown of what we’ve done
- We modified the content of App.js to render a list of images.
- We created a NetworkDetector HOC to listen for changes to internet connectivity and display a notification.
- We also made modifications to App.css, and index.css to properly arrange the content on our webpage.
What can be improved on?
Customize the notification to float on any page as opposed to staying atop all your web pages which would be impossible to see if you are not at the top of the page. This can be achieved using CSS or any alert packages like sweetalert, toastr, etc.
We’ve come to the end of this article and I hope this has helped shed light into handling and relaying internet connection status to your users. Thanks for reading, and please leave a comment if you’ve any question.
