Check whether the user is Online or Offline using React hooks and providers.
Have you ever faced an issue where when you are browsing or surfing on the internet, in middle you lost the connection and you never know whether the connection is there or not? Sometimes, as a user, I feel very frustrated when I lose the connection and my browser doesn’t notify me and I need to refresh the page and then I lost what I am doing. Then, after a few seconds network comes back. Then we can see our website and do our work whatever we were doing. But, As a frontend developer, I think it is important to understand user experience regarding network disconnectivity.
As react developers, we will be understanding and solving this problem by using some essential concepts of react and javascript. Vanilla JavaScript provides good event listeners to handle this situation but when we work with react we need to understand that we should take it in a proper way. What is the proper way? It depends from developer to developer. But, here, what we will be doing is, we are creating Provider and Wrapping out the main <App/> component around that provider. And we will be creating a hook called useNetworkCheck which will return us the value isOnline which is a boolean. If the user is connected to the internet then isOnline will be true or else it will be false.
Let’s start by creating a react context and provider which will give us NetworkProvider and useNetworkCheck hook. Create a folder called context and inside it creates network-context.js
Let’s start by importing, the required hooks from react.
Now, create a context called NetworkContext.
Now, create a component which is called as NetworkProvider which take children as a prop.
Inside the network component, create a state which gives a value isOnline.
For the above state, we have an initial value which is a function that returns a true or false from navigator API. (React more about navigator.onLine )
Now, javascript has two events that detect the changes in window of browsers. We can use them inside of useEffect and set the isOnline state.
And our NetworkProvider will return the Provider with children in between it.
So, the entire NetworkProvider component will look as given below.
Now, create a Hook called useNetworkCheck which will give us the value of isOnline which can be accessed anywhere in Components that are children of NetworkProvider .
Below, NetworkProvider component creates this hook.
The entire Code of network-context.js is as below, which exports NetworkProvider and useNetworkCheck hook.
But, useEffect above looks a little bit underperforming that it will every time anything changes in the component as it does not have any dependencies. Let's add useCallback hook to set the state of isOnline . And this will be our file network-context.js
Now, whatever react app you have created, we need to wrap our <App/> component around NetworkProvider so that we can access the useNetworkCheck hook. So, in index.js of our app, let's do this.
Now, In App.js file, we can consume the hook useNetworkCheck which gives us the status of whether the user is connected to the internet or not.
const {isOnline} = useNetworkCheck();Let's add this is App.js
This is how you can use useNetworkCheck hook and use it over your App.
Why do we need this kind of network status check?
Most static website which consumes direct content does not require this kind of network check status. But, if your webapp is for video Streaming or something like showing live data to the user, then as a developer it is our responsibility to show the user about its network status and it is also required for a better user experience.
Why are we wrapping NetworkProvider to App component ?
It is not necessary to wrap NetorkProvider around App component. It is what is needed as per requirement. If you have only one component which required to know, whether the user is connected to internet or not, then it is good to wrap NetworkProvider around that component only.
network-context.tsx in Typescript :
