Implementing a useScript Hook in React

The useScript hook is a utility that allows you to dynamically load and manage external JavaScript scripts within a React component. This is particularly useful when you need to integrate third-party libraries or scripts that aren't bundled with your application, ensuring they are loaded and ready before your component interacts with them. This challenge asks you to implement this hook, handling script loading, error management, and cleanup.

Problem Description

You are tasked with creating a useScript hook in React using TypeScript. This hook should take a script URL as an argument and manage the loading and unloading of the script. The hook should return a boolean value indicating whether the script has been successfully loaded.

Key Requirements:

• Loading: The hook should dynamically create a <script> element, set its src attribute to the provided URL, and append it to the document's head.
• Error Handling: The hook should handle potential errors during script loading (e.g., network errors, invalid URLs). It should set the loaded state to false in case of an error.
• Unloading: When the component unmounts, the hook should remove the script element from the document's head to prevent memory leaks.
• Loading State: The hook should maintain a boolean state variable (loaded) that reflects whether the script has been successfully loaded. This state should be updated during loading, error, and successful completion.
• Debouncing (Optional but Recommended): Consider debouncing the script loading to prevent multiple script tags from being added if the component re-renders quickly.

Expected Behavior:

• On initial mount, the hook should attempt to load the script.
• While the script is loading, loaded should be false.
• Upon successful loading, loaded should become true.
• If an error occurs during loading, loaded should become false.
• On unmount, the script tag should be removed from the DOM.
• Subsequent renders should not re-load the script if it's already loaded.

Edge Cases to Consider:

• The script URL is invalid.
• The network is unavailable.
• The script fails to load for any other reason.
• The component unmounts before the script finishes loading.
• The same script URL is passed multiple times.

Examples

Example 1:

Input: URL: "https://example.com/script.js"
Output: Initially, loaded: false. After successful load, loaded: true. Script tag added to document head.
Explanation: The hook successfully loads the script from the provided URL and updates the loaded state accordingly.

Example 2:

Input: URL: "https://invalid-url.com/script.js"
Output: Initially, loaded: false. After attempting to load, loaded: false.
Explanation: The hook attempts to load the script, but due to the invalid URL, the load fails, and the loaded state remains false.

Example 3: (Component unmounts during loading)

Input: URL: "https://example.com/script.js", Component unmounts before script finishes loading.
Output: loaded: false. Script tag is not added to the document head.
Explanation: The component unmounts before the script finishes loading, preventing the script tag from being added to the DOM and ensuring no memory leaks.

Constraints

• The hook must be written in TypeScript.
• The hook should be reusable across different React components.
• The script URL must be a string.
• The hook should not introduce any unnecessary dependencies.
• The script loading should be asynchronous.
• The hook should handle errors gracefully and not crash the application.

Notes

• Consider using useEffect to manage the script loading lifecycle.
• You can use document.createElement and document.head to manipulate the DOM.
• Think about how to handle the case where the script is already loaded. Avoid re-loading it unnecessarily.
• Debouncing the script loading can improve performance and prevent issues with rapid re-renders. Libraries like Lodash can be helpful for this, but a simple timeout implementation is also acceptable.
• Focus on creating a robust and reliable hook that handles various scenarios.