---
title: useLoadScript
description: The useLoadScript hook loads an external script tag in the browser.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useloadscript'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useloadscript.md'
api_name: hydrogen
---

# useLoadScript

The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.

#### Props

**`[src: string, options?: LoadScriptOptions]`**

### LoadScriptOptions

* **attributes**

  **Record\<string, string>**

  Construct a type with a set of properties K of type T

* **in**

  **'head' | 'body'**

* **module**

  **boolean**

### LoadScriptOptions

* attributes

  Construct a type with a set of properties K of type T

  ```ts
  Record<string, string>
  ```

* in

  ```ts
  'head' | 'body'
  ```

* module

  ```ts
  boolean
  ```

Examples

### Examples

* #### Example code

  ##### JavaScript

  ```jsx
  import React, {useEffect} from 'react';
  import {useLoadScript} from '@shopify/hydrogen';

  export default function Homepage() {
    const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');

    useEffect(() => {
      if (scriptStatus === 'done') {
        // do something
      }
    }, [scriptStatus]);

    return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;
  }
  ```

  ##### TypeScript

  ```tsx
  import React, {useEffect} from 'react';
  import {useLoadScript} from '@shopify/hydrogen';

  export default function Homepage() {
    const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');

    useEffect(() => {
      if (scriptStatus === 'done') {
        // do something
      }
    }, [scriptStatus]);

    return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;
  }
  ```

***