How to Retrieve Device Info and ID in ReactJS Web Apps (2026)

In web development, understanding the user's device can be crucial for optimizing your app's performance and tailoring the user experience. Although React Native provides a convenient way to access device information, the same is not readily available for ReactJS web applications. This tutorial demonstrates how to retrieve device information and a unique device ID in ReactJS web applications without relying on React Native libraries.

Key Takeaways

• Learn to gather basic device information in ReactJS using browser APIs.
• Generate a pseudo-unique device ID for user sessions.
• Avoid common pitfalls when trying to use React Native libraries in web projects.
• Implement a lightweight solution without additional dependencies.

Web developers often need to identify the user's device to enhance functionality and user experience. This is typically straightforward in mobile applications using React Native, but it poses challenges in ReactJS web applications. This guide will walk you through leveraging browser APIs to extract essential device information and generate a unique device ID, ensuring compatibility and performance in your web projects.

Prerequisites

• Basic understanding of ReactJS and JavaScript (ES6+).
• Node.js and npm installed on your development environment.
• A ReactJS project set up (e.g., using Create React App).

Step 1: Access Basic Device Information

The browser provides several APIs to help you access device-related details. You can use the navigator object to gather basic information about the user's device.

// src/utils/deviceInfo.js
export const getDeviceInfo = () => {
  const { appName, appVersion, platform, userAgent } = navigator;
  return {
    appName,
    appVersion,
    platform,
    userAgent
  };
};

This function extracts essential information like the browser name, version, operating system platform, and user agent details.

Step 2: Generate a Unique Device ID

Generating a unique ID for a device in a web application can be tricky. A typical approach is to create a UUID (Universally Unique Identifier) and store it in the user's browser using local storage.

// src/utils/deviceId.js
import { v4 as uuidv4 } from 'uuid';

export const getDeviceId = () => {
  let deviceId = localStorage.getItem('deviceId');
  if (!deviceId) {
    deviceId = uuidv4();
    localStorage.setItem('deviceId', deviceId);
  }
  return deviceId;
};

By storing the UUID in local storage, you ensure that the ID persists across sessions as long as the user does not clear their browser data.

Step 3: Integrate Device Info and ID in Your React App

Once you've defined functions to get device info and device ID, you can integrate them into your React components.

// src/App.js
import React, { useEffect, useState } from 'react';
import { getDeviceInfo } from './utils/deviceInfo';
import { getDeviceId } from './utils/deviceId';

function App() {
  const [deviceInfo, setDeviceInfo] = useState({});
  const [deviceId, setDeviceId] = useState('');

  useEffect(() => {
    setDeviceInfo(getDeviceInfo());
    setDeviceId(getDeviceId());
  }, []);

  return (
    
      Device Information
      {JSON.stringify(deviceInfo, null, 2)}
      Your Device ID: {deviceId}
    
  );
}

export default App;

This code will display the device information and unique device ID on your application's main page. You can further use this information to tailor functionalities or log device-specific analytics.

Common Errors/Troubleshooting

When implementing these solutions, you might encounter a few common issues:

• UUID Module Not Found: Ensure you have installed the UUID package via npm with npm install uuid.
• Local Storage Limitations: Remember that local storage has a size limit (typically around 5MB). Store only essential information.
• User Clears Browser Data: If a user clears their browser data, the device ID will be reset. Consider server-side storage for critical persistence.

Frequently Asked Questions

Can I use React Native libraries in ReactJS web apps?

No, React Native libraries are designed for mobile applications and will not work in ReactJS web applications due to different environments and dependencies.

Is it safe to store the device ID in local storage?

Storing the device ID in local storage is generally safe for non-sensitive data but can be cleared by the user. Consider server-side storage for critical information.

How unique is the UUID generated for device IDs?

UUIDs are designed to be globally unique. The likelihood of generating duplicate UUIDs is extremely low, making them reliable for unique identification purposes.