Implement useNetworkState Hook in React

This challenge asks you to create a custom React hook, useNetworkState, that efficiently tracks and provides the current online/offline status of the user's browser. This is crucial for building robust web applications that can gracefully handle network interruptions, such as displaying informative messages or disabling certain features when offline.

Problem Description

You need to implement a React hook named useNetworkState that returns the current network status of the browser. The hook should:

• Track Network Status: It should leverage browser events to determine if the user is currently online or offline.
• Provide State: The hook should return a boolean value representing the network status. true for online, false for offline.
• Update in Real-time: The returned status should automatically update as the network connection changes.
• Initial State: The hook should correctly determine the initial network status when the component mounts.

Key Requirements:

• The hook must be written in TypeScript.
• It should utilize the navigator.onLine property and the online and offline browser events.
• The hook should be a functional hook.

Expected Behavior:

• When the browser is connected to the internet, the hook should return true.
• When the browser loses internet connection, the hook should return false.
• The hook's output should change to reflect the current network status in near real-time.

Edge Cases to Consider:

• Initial State: How does the hook behave on initial render before any network events have fired?
• Browser Support: While navigator.onLine and related events are widely supported, consider if there are any subtle differences in how they might be interpreted across older browsers (though for this challenge, modern browser behavior is the primary focus).
• SPA Navigation: If the application is a Single Page Application and navigates between routes without a full page reload, the hook should still function correctly.

Examples

Example 1:

Component Usage:

import React from 'react';
import { useNetworkState } from './useNetworkState'; // Assuming hook is in this file

function NetworkStatusDisplay() {
  const isOnline = useNetworkState();

  return (
    <div>
      <h2>Network Status</h2>
      <p>You are currently: {isOnline ? 'Online' : 'Offline'}</p>
    </div>
  );
}

Behavior:

• Scenario 1: Browser is online.

  • isOnline will be true.
  • The component will render: "You are currently: Online"

• Scenario 2: Browser goes offline.

  • isOnline will change from true to false.
  • The component will re-render to display: "You are currently: Offline"

• Scenario 3: Browser comes back online.

  • isOnline will change from false to true.
  • The component will re-render to display: "You are currently: Online"

Explanation: The useNetworkState hook listens to browser network events and updates its state, causing the component that uses it to re-render with the correct network status.

Example 2: Initial Check

• Scenario: Component mounts when browser is offline.
  • navigator.onLine is false initially.
  • isOnline will be false on the first render.
  • The component will render: "You are currently: Offline"

Explanation: The hook correctly initializes its state based on the navigator.onLine property upon the first render.

Constraints

• The solution must be a TypeScript functional React hook.
• The hook should not rely on any third-party libraries for network status checking.
• The hook should be performant and avoid unnecessary re-renders.
• The returned value must be a boolean.

Notes

• Consider how to handle cleanup of event listeners when the component unmounts to prevent memory leaks.
• Think about the initial value of navigator.onLine and how to use it to set the hook's initial state.
• The online and offline events are attached to the window object.