Scribd
Upload
8 views

_script_ – React

The document provides an overview of the built-in <script> component in React, which allows users to render both inline and external scripts in their applications. It details the props supported by the component, such as children, src, async, and others, along with their functionalities and special rendering behaviors. Additionally, it includes usage examples for rendering external and inline scripts, highlighting React's ability to de-duplicate identical scripts and manage script loading efficiently.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

_script_ – React

The document provides an overview of the built-in <script> component in React, which allows users to render both inline and external scripts in their applications. It details the props supported by the component, such as children, src, async, and others, along with their functionalities and special rendering behaviors. Additionally, it includes usage examples for rendering external and inline scripts, highlighting React's ability to de-duplicate identical scripts and manage script loading efficiently.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

20/02/2025, 18:32 <script> – React

v19

API REFERENCE COMPONENTS

<script>
The built-in browser <script> component lets you add a script to
your document.

<script> alert("hi!") </script>

Reference

<script>

Usage

Rendering an external script


Rendering an inline script

Reference

<script>

To add inline or external scripts to your document, render the built-in


browser <script> component. You can render <script> from any
component and React will in certain cases place the corresponding DOM
element in the document head and de-duplicate identical scripts.

<script> alert("hi!") </script>


<script src="script.js" />

See more examples below.

https://react.dev/reference/react-dom/components/script 1/7
20/02/2025, 18:32 <script> – React

Props

<script> supports all common element props.

It should have either children or a src prop.

children : a string. The source code of an inline script.

src : a string. The URL of an external script.

Other supported props:

async : a boolean. Allows the browser to defer execution of the script until
the rest of the document has been processed — the preferred behavior
for performance.
crossOrigin : a string. The CORS policy to use. Its possible values are
anonymous and use-credentials .

fetchPriority : a string. Lets the browser rank scripts in priority when


fetching multiple scripts at the same time. Can be "high" , "low" , or
"auto" (the default).

integrity : a string. A cryptographic hash of the script, to verify its


authenticity.
noModule : a boolean. Disables the script in browsers that support ES
modules — allowing for a fallback script for browsers that do not.
nonce : a string. A cryptographic nonce to allow the resource when using a
strict Content Security Policy.
referrer : a string. Says what Referer header to send when fetching the
script and any resources that the script fetches in turn.
type : a string. Says whether the script is a classic script, ES module, or
import map.

Props that disable React’s special treatment of scripts:

onError : a function. Called when the script fails to load.

onLoad : a function. Called when the script finishes being loaded.

Props that are not recommended for use with React:

blocking : a string. If set to "render" , instructs the browser not to render


the page until the scriptsheet is loaded. React provides more fine-grained

https://react.dev/reference/react-dom/components/script 2/7
20/02/2025, 18:32 <script> – React

control using Suspense.


defer : a string. Prevents the browser from executing the script until the
document is done loading. Not compatible with streaming server-
rendered components. Use the async prop instead.

Special rendering behavior

React can move <script> components to the document’s <head> and de-
duplicate identical scripts.

To opt into this behavior, provide the src and async={true} props. React
will de-duplicate scripts if they have the same src . The async prop must be
true to allow scripts to be safely moved.

This special treatment comes with two caveats:

React will ignore changes to props after the script has been rendered.
(React will issue a warning in development if this happens.)
React may leave the script in the DOM even after the component that
rendered it has been unmounted. (This has no effect as scripts just
execute once when they are inserted into the DOM.)

Usage

Rendering an external script

If a component depends on certain scripts in order to be displayed correctly,


you can render a <script> within the component.
However, the component might be committed before the script has finished
loading.
You can start depending on the script content once the load event is fired
e.g. by using the onLoad prop.

React will de-duplicate scripts that have the same src , inserting only one of
them into the DOM even if multiple components render it.

https://react.dev/reference/react-dom/components/script 3/7
20/02/2025, 18:32 <script> – React

App.js ShowRenderedHTML.js Reset

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Map({lat, long}) {


return (
<>
<script async src="map-api.js" onLoad={() => console.log('scrip
<div id="map" data-lat={lat} data-long={long} />
</>
);
}

Show more

Note

When you want to use a script, it can be beneficial to call the preinit
function. Calling this function may allow the browser to start

https://react.dev/reference/react-dom/components/script 4/7
20/02/2025, 18:32 <script> – React

fetching the script earlier than if you just render a <script>


component, for example by sending an HTTP Early Hints response.

Rendering an inline script

To include an inline script, render the <script> component with the script
source code as its children. Inline scripts are not de-duplicated or moved to
the document <head> .

App.js ShowRenderedHTML.js Reset

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Tracking() {
return (
<script>
ga('send', 'pageview');
</script>
);
}

export default function Page() {


return (

Show more

https://react.dev/reference/react-dom/components/script 5/7
20/02/2025, 18:32 <script> – React

PREVIOUS

<meta>

NEXT

<style>

Copyright © Meta Platforms, Inc

uwu?

Learn React API Reference

Quick Start React APIs

Installation React DOM APIs

Describing the UI

Adding Interactivity

Managing State

Escape Hatches

Community More

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

https://react.dev/reference/react-dom/components/script 6/7
20/02/2025, 18:32 <script> – React

https://react.dev/reference/react-dom/components/script 7/7

You might also like