Hello, Dev.to community! In this tutorial, we'll explore how to create a real-time online status checker in a React application using the powerful useSyncExternalStore
hook.
Let's dive in step by step to understand the code and implement this feature in your React projects. Ready? Let's get started!
Step 1: Setting up the Project
First, create a new React project or use an existing one.
npx create-react-app myapp
or if you want to integrate in another web project, make sure you have the react
library installed. Additionally, ensure that you have useSyncExternalStore
from the 'react' library. You can install it using:
npm install react
Step 2: Creating the useOnlineStatus Hook
Now, let's implement the useOnlineStatus
hook. This hook utilizes useSyncExternalStore
to manage the online status in real-time.
// useOnlineStatus.js
import { useSyncExternalStore } from 'react';
export function useOnlineStatus() {
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
return isOnline;
}
function getSnapshot() {
// value getter
}
function subscribe(callback) {
// subscribe logic
}
The getSnapShot
function is used to get the value which will be returned by the hook.
//...other code
function getSnapshot() {
return navigator.onLine;
}
//...other code
Here we get the online status using the navigator.onLine which returns the boolean value whether the client is connected to internet or not.
The subscribe
function is provided a callback as parameter and we need to call the callback function whenever we want to hit the getSnapshot
function to get the desired value.
//...other code
function subscribe(callback) {
window.addEventListener('online', callback);
window.addEventListener('offline', callback);
return () => {
window.removeEventListener('online', callback);
window.removeEventListener('offline', callback);
};
}
Here we subscribe to the online
and offline
event using their respective event listeners
so that it triggers the getSnapshot
function whenever there is a change in internet connectivity i.e if the user goes online or offline.
Final code for useOnlineStatus hook
// useOnlineStatus.js
import { useSyncExternalStore } from 'react';
export function useOnlineStatus() {
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
return isOnline;
}
function getSnapshot() {
return navigator.onLine;
}
function subscribe(callback) {
window.addEventListener('online', callback);
window.addEventListener('offline', callback);
return () => {
window.removeEventListener('online', callback);
window.removeEventListener('offline', callback);
};
}
Step 3: Implementing the Online Status Checker
Now that we have our hook, let's use it in our component.
// App.js
import React from 'react';
import { useOnlineStatus } from './useOnlineStatus';
function App() {
const isOnline = useOnlineStatus();
return (
<div>
<h1>Online Status Checker</h1>
<h2>{isOnline ? "✅ Online" : "❌ Disconnected"}</h2>;
</div>
);
}
export default App;
Conclusion
Congratulations! You've successfully built a real-time online status checker using React's useSyncExternalStore
hook. Feel free to experiment with this feature in your projects and let me know your thoughts in the comments.
We have a youtube video explaining this as well. Please feel free to watch it.
If you found this tutorial helpful, please give it a like, share it with your fellow developers, and don't forget to follow for more React tips and tutorials. Happy coding!
Top comments (0)