Implementing a useNetworkState Hook in React

The useNetworkState hook is a utility that allows React components to easily track the online/offline status of the user's network connection. This is incredibly useful for providing graceful degradation, displaying appropriate messages to the user, or enabling/disabling features based on network availability. Your task is to implement this hook, providing a reliable and reactive way to monitor network connectivity within your React applications.

Problem Description

You need to implement a custom React hook called useNetworkState. This hook should:

1. Track Network Status: Monitor the online/offline status of the user's network connection.
2. Return State: Return an object with the following properties:
   • isConnected: A boolean value indicating whether the user is online (true) or offline (false).
   • isLoading: A boolean value indicating whether the connection status is currently being determined (true) or has a definitive state (false). This is important during initial load or when the connection state is rapidly changing.
3. React to Changes: Automatically update the isConnected state whenever the network connection status changes.
4. Initial Load: Handle the initial load state gracefully. The isLoading state should be true initially while the hook determines the connection status.
5. Event Listener: Use the navigator.onLine property to determine the initial connection status and set up an event listener for the online and offline events to react to changes.

Expected Behavior:

• On initial render, isLoading should be true.
• isConnected should reflect the initial navigator.onLine value.
• When the user goes online, isConnected should become true and isLoading should become false.
• When the user goes offline, isConnected should become false and isLoading should become false.
• The component using the hook should re-render whenever isConnected or isLoading changes.

Edge Cases to Consider:

• Browser Support: navigator.onLine might not be reliable in all browsers or environments. While not required to handle this explicitly, be aware of its limitations.
• Initial Load Time: The initial determination of the connection status might take a short amount of time. The isLoading state is crucial for handling this.
• Rapid State Changes: The network connection might fluctuate rapidly. Ensure the hook handles these changes without causing excessive re-renders.

Examples

Example 1:

Input: Initial network state is online.
Output: { isConnected: true, isLoading: false }
Explanation: The hook initializes with the online state and sets isLoading to false immediately after.

Example 2:

Input: Initial network state is offline, then the user goes online.
Output:
- Initial: { isConnected: false, isLoading: false }
- After going online: { isConnected: true, isLoading: false }
Explanation: The hook starts offline, then updates to online when the 'online' event fires.

Example 3: (Edge Case - Initial Load)

Input: The browser is offline when the component mounts, but the user immediately goes online.
Output:
- Initial: { isConnected: false, isLoading: true }
- After going online: { isConnected: true, isLoading: false }
Explanation: The hook starts with isLoading: true, then updates to online when the 'online' event fires.

Constraints

• The hook must be written in TypeScript.
• The hook must use the navigator.onLine property and the online and offline events.
• The hook should avoid unnecessary re-renders.
• The hook should be compatible with standard React environments.
• The hook should not rely on external libraries.

Notes

• Consider using useEffect to manage the event listeners and initial state determination.
• Think about how to handle the initial load state effectively. The isLoading flag is key.
• Remember to clean up the event listeners when the component unmounts to prevent memory leaks.
• Focus on creating a clean, readable, and efficient implementation.