A Guide To Handling Internet Disconnection In React Applications.

Samson Negedu
Jan 22, 2019 · 4 min read
Image for post
Image for post
Photo by Thomas Jensen on Unsplash

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:

When that is done, open the folder you just created in your editor of choice. You should have the following folder structure.

Image for post
Image for post
Image 1: Folder structure after bootstrapping your app with create-react-app.

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:

Image 2: Array of images to display.

Replace the content of App.css with the styles below:

Image 3: CSS styles for App.css.

Do likewise to the index.css file:

Image 4: CSS styles for index.css.

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:

Image 5: Network detector Hoc — https://gist.github.com/9b2b1a4ee0fadea9b37927b68c1d74ce.git

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:

Image 6: Content of App.js Component, https://gist.github.com/6409fd53f6357a153d8fdbd7d2294cfd.git

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.

Image for post
Image for post
Gif: Output on the browser when the online status of the webpage is toggled

Below, is a code sandbox I created that you can play around with.

Codesandbox with all codes written.

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.

Backticks & Tildes

Distributed knowledge without borders

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store