useNetwork

Tracks the state of browser’s network connection.

As of the standard it is not guaranteed that browser connected to the Internet, it only guarantees the network connection

useNetwork wraps the Network Information API and the online/offline events to provide a comprehensive view of network status. It returns an object with online (boolean), previous online state, since (timestamp of last change), and detailed connection info including downlink, effectiveType (2g/3g/4g), rtt, type (wifi/cellular/ethernet), and saveData. Values update reactively as network conditions change.

When to Use

Displaying online/offline status indicators and showing fallback UI when disconnected
Adapting content quality (image resolution, video bitrate) based on connection speed
Implementing offline-first features that queue actions and sync when connectivity returns

Notes

SSR-safe: Returns undefined for all values during server-side rendering. No navigator or window event access occurs on the server.
Network Information API: Detailed connection properties (downlink, effectiveType, rtt, type) are only available in Chromium-based browsers. The online status is universally supported.
Related hooks: See also useOnline for a simpler boolean wrapper around network connectivity status.

Usage

Live Editor

function Demo() {
  const state = useNetwork();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};

Result

API

useNetwork

Returns

IUseNetworkState

Arguments

IUseNetworkState

Property	Description	Type	DefaultValue
online	Whether browser connected to the network or not.	boolean \| undefined (Required)	`-`
previous	Previous value of `online` property. Helps to identify if browserjust connected or lost connection.	boolean \| undefined (Required)	`-`
since	The {Date} object pointing to the moment when state change occurred.	Date \| undefined (Required)	`-`
downlink	Effective bandwidth estimate in megabits per second, rounded to thenearest multiple of 25 kilobits per seconds.	INetworkInformation['downlink'] \| undefined (Required)	`-`
downlinkMax	Maximum downlink speed, in megabits per second (Mbps), for theunderlying connection technology	INetworkInformation['downlinkMax'] \| undefined (Required)	`-`
effectiveType	Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.This value is determined using a combination of recently observed round-trip timeand downlink values.	INetworkInformation['effectiveType'] \| undefined (Required)	`-`
rtt	Estimated effective round-trip time of the current connection, roundedto the nearest multiple of 25 milliseconds	INetworkInformation['rtt'] \| undefined (Required)	`-`
saveData	{true} if the user has set a reduced data usage option on the user agent.	INetworkInformation['saveData'] \| undefined (Required)	`-`
type	The type of connection a device is using to communicate with the network.It will be one of the following values:- bluetooth- cellular- ethernet- none- wifi- wimax- other- unknown	INetworkInformation['type'] \| undefined (Required)	`-`

INetworkInformation

export interface INetworkInformation extends EventTarget {
  readonly downlink: number;
  readonly downlinkMax: number;
  readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
  readonly rtt: number;
  readonly saveData: boolean;
  readonly type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
  onChange: (event: Event) => void;
}