Create a useWindowSize Hook in React

This challenge asks you to build a custom React hook, useWindowSize, that dynamically tracks the dimensions of the browser window. This hook is incredibly useful for creating responsive layouts, adjusting component behavior based on screen size, and generally making your React applications more adaptable to different devices. It should return an object containing the window's width and height.

Problem Description

You need to create a React hook named useWindowSize that returns an object containing the current width and height of the browser window. The hook should:

1. Initialize: On the initial render, the hook should get the current window dimensions and store them.
2. Update on Resize: Whenever the browser window is resized, the hook should update its internal state with the new dimensions.
3. Return Values: The hook should return an object with two properties: width (number) and height (number), representing the window's width and height in pixels, respectively.
4. Cleanup: The hook should include a cleanup function that removes the event listener when the component unmounts to prevent memory leaks.

Key Requirements:

• The hook must be written in TypeScript.
• The hook must use the useState hook to manage the window dimensions.
• The hook must use the useEffect hook to add and remove the window resize event listener.
• The hook must return an object with width and height properties.

Expected Behavior:

• When the component using the hook mounts, the hook should immediately return the current window dimensions.
• When the window is resized, the hook should update its state and return the new dimensions.
• When the component using the hook unmounts, the event listener should be removed.

Edge Cases to Consider:

• What happens if the window is initially very small or very large?
• How do you ensure the event listener is properly removed to avoid memory leaks?
• Consider the initial render and how to get the window size at that point.

Examples

Example 1:

Input: A React component using the useWindowSize hook.
Output: { width: 1920, height: 1080 } (assuming a 1920x1080 window)
Explanation: The hook retrieves the current window dimensions on initial render.

Example 2:

Input: A React component using the useWindowSize hook, followed by resizing the window to 1280x720.
Output: { width: 1280, height: 720 }
Explanation: The hook updates its state and returns the new window dimensions after the resize event.

Example 3: (Edge Case - Initial Window Size)

Input: A React component using the useWindowSize hook, where the initial window size is 320x568 (e.g., a mobile device).
Output: { width: 320, height: 568 }
Explanation: The hook correctly retrieves and returns the dimensions of a smaller window.

Constraints

• The hook must be implemented using only standard React hooks (useState, useEffect).
• The returned width and height values must be numbers representing pixels.
• The hook should be performant and avoid unnecessary re-renders. Avoid using window directly in the component body outside of the hook.
• The hook should be compatible with functional React components.

Notes

• Think about how to efficiently capture the window resize event.
• Remember to clean up the event listener to prevent memory leaks.
• Consider how to handle the initial render and get the window size at that time.
• The hook should be reusable across different components.