---
title: useLoadScript
description: >-
  The `useLoadScript` hook loads an external script tag in the browser. It
  allows React components to lazy-load third-party dependencies.
api_version: 2023-07
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-07/hooks/useloadscript'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-07/hooks/useloadscript.md'
---

# use​Load​Scripthook

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?: { module?: boolean; in?: "body" | "head"; }]`

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### 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>;
  }
  ```