useNetworkInformation

A performance-aware hook that provides real-time network telemetry and user connectivity preferences to adapt application behavior.

Warning

Limited browser support. This experimental API is mostly available in Chrome and Edge. It will return supported: false in Safari and Firefox.

Important

Bandwidth metrics (downlink, rtt) are heuristics based on recent activity and should be treated as rough estimates for adaptive loading.

Installation

bash

Description

The useNetworkInformation hook with the Network Information API to expose live data about the device's connection quality, such as bandwidth (downlink), latency (rtt), and connection type (e.g. WiFi, celullar). It also detects the user's explicit saveData preference.

This hook is essential for implementing Adaptative Loading strategies. By monitoring network conditions, applications can automatically serve lower-resolution assets, disable autoplay media, or defer non-critical background tasks when the user is on a congested or expensive connection.

Return values

NameTypeDescription
supportedbooleanIndicates if the Network Information API is available.
type'bluetooth' | 'cellular' | 'ethernet' | 'node' | 'wifi' | 'wimax' | 'other' | 'unknown'Physical connection type.
effectiveType'slow-2g' | '2g' | '3g' | '4g'Estimated effective connection type.
downlinknumberEstimated bandwidth in Mb/s.
downlinkMaxnumberEstimated maximum bandwidth in Mb/s.
rttnumberEstimated round-trip time in ms.
saveDatabooleanIndicates if the user has enabled a reduced data usage mode.

Demo

This component is loading.

Source code

tsx