react-dom/components

130 notes in this subject, read out of this brain and free to use. This is page 2 of 3.

<link> preload and modulepreload props table

Props that apply when rel="preload" or rel="modulepreload": as (string, required, type of resource with possible values audio, document, embed, fetch, font, image, object, script, style, track, video, worker), imageSrcSet (string, applicable only when as="image", specifies source set of image), imageSizes (string, applicable only when as="image", specifies sizes of image).

<link> icon props table

Props that apply when rel="icon" or rel="apple-touch-icon": sizes (string, the sizes of the icon).

<link> stylesheet special rendering behavior

When rel="stylesheet" with precedence prop, the component that renders <link> will suspend while the stylesheet is loading. If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same href prop. This special behavior does not apply if the link lacks a precedence prop or if any of onLoad, onError, or disabled props are supplied, as these indicate manual stylesheet loading management.

<link> special rendering behavior exceptions

React's special behavior of placing <link> in document head does not apply in these cases: (1) If the <link> has an itemProp prop, because it applies to a specific part of the page rather than the document; (2) If the <link> has an onLoad or onError prop, because you are managing the loading of the linked resource manually within your React component.

<link> prop changes ignored after rendering

React will ignore changes to props after the link has been rendered. React will issue a warning in development if prop changes occur. Additionally, React may leave the link in the DOM even after the component that rendered it has been unmounted.

<link> with itemProp does not render to head

When using the <link> component with the itemProp prop to annotate specific items within the document, React will not place these annotations within the document <head> but will place them like any other React component, rendering them in their declared location in the component tree.

<link rel="stylesheet" with precedence example

Example of linking to a stylesheet with precedence: <link rel="stylesheet" href="sitemap.css" precedence="medium" />

<meta> example: itemProp metadata

Example of annotating specific items within the document using itemProp: ```js <section itemScope> <h3>Annotating specific items</h3> <meta itemProp="description" content="API reference for using <meta> with itemProp" /> <p>...</p> </section> ``` When using itemProp, React renders the <meta> element in place like any other component, not in the document head.

<meta> component requires exactly one identifying prop

<meta> props reference

The <meta> component accepts the following props: name (string, specifies kind of metadata per MDN), charset (string, valid value is 'utf-8', specifies character set), httpEquiv (string, specifies document processing directive), itemProp (string, specifies metadata about a particular item rather than document), content (string, specifies metadata to attach when used with name or itemProp, or directive behavior when used with httpEquiv). Also supports all common element props.

<meta> with itemProp does not place element in head

When <meta> has an itemProp prop, React does not apply special rendering behavior to place it in the document head. Instead, it renders like any other React component in the location where it appears, because it represents metadata about a specific part of the page rather than metadata about the document as a whole.

<meta> component renders to document head

The <meta> component in React always places the corresponding DOM element within the document's <head>, regardless of where in the React tree it is rendered. This is special rendering behavior specific to <meta> elements.

<meta> example: document metadata

Example of annotating document with metadata: ```js import ShowRenderedHTML from './ShowRenderedHTML.js'; export default function SiteMapPage() { return ( <ShowRenderedHTML> <meta name="keywords" content="React" /> <meta name="description" content="A site map for the React website" /> <h1>Site Map</h1> <p>...</p> </ShowRenderedHTML> ); } ``` React places these <meta> tags in the document <head> regardless of where they appear in the React tree.

<progress> supports common element props

The <progress> component supports all common element props as defined in React DOM.

<progress> value prop

The value prop accepts a number between 0 and max, or null for indeterminate progress. It specifies how much work has been completed.

<progress> indeterminate state

Pass value={null} to the <progress> component to display it in an indeterminate state, used when the operation status is unknown.

<progress> example with various states

export default function App() { return ( <> <progress value={0} /> <progress value={0.5} /> <progress value={0.7} /> <progress value={75} max={100} /> <progress value={1} /> <progress value={null} /> </> ); } This example shows progress indicators with different values: empty (0), half (0.5), partial (0.7), custom scale (75/100), full (1), and indeterminate (null).

<progress> component

The <progress> component renders the built-in browser progress indicator element. It displays a visual representation of task progress.

<progress> max prop

The max prop specifies the maximum value for the progress indicator. It accepts a number and defaults to 1.

script component special rendering behavior - deduplication and head placement

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.

script component special rendering behavior caveats

React will ignore changes to props after the script has been rendered and 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.

script component external script example

Example of rendering an external script with onLoad handler: ```js function Map({lat, long}) { return ( <> <script async src="map-api.js" onLoad={() => console.log('script loaded')} /> <div id="map" data-lat={lat} data-long={long} /> </> ); } ``` The component might be committed before the script has finished loading. Start depending on the script content once the load event is fired using the onLoad prop. React will de-duplicate scripts that have the same src, inserting only one into the DOM even if multiple components render it.

script component preinit optimization

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 fetching the script earlier than if you just render a <script> component, for example by sending an HTTP Early Hints response.

script component inline script example

Example of rendering an inline script: ```js function Tracking() { return ( <script> ga('send', 'pageview'); </script> ); } ``` Inline scripts are not de-duplicated or moved to the document <head>.

script component basic usage

The built-in browser <script> component lets you add scripts to your document. You can render it from any component, and React will place the corresponding DOM element in the document and de-duplicate identical scripts. Example: <script> alert("hi!") </script> or <script src="script.js" />

script component props - children or src required

The <script> component should have either children or a src prop, but not both. children is a string containing the source code of an inline script. src is a string with the URL of an external script.

script component props - async

The async prop is a boolean that allows the browser to defer execution of the script until the rest of the document has been processed. This is the preferred behavior for performance.

script component props - crossOrigin

The crossOrigin prop is a string that specifies the CORS policy to use. Possible values are 'anonymous' and 'use-credentials'.

script component props - fetchPriority

The fetchPriority prop is a string that lets the browser rank scripts in priority when fetching multiple scripts at the same time. Possible values are 'high', 'low', or 'auto' (the default).

script component props - integrity

The integrity prop is a string containing a cryptographic hash of the script to verify its authenticity.

script component props - noModule

The noModule prop is a boolean that disables the script in browsers that support ES modules, allowing for a fallback script for browsers that do not.

script component props - referrer

The referrer prop is a string that specifies what Referer header to send when fetching the script and any resources that the script fetches in turn.

script component props - type

The type prop is a string that specifies whether the script is a classic script, ES module, or import map.

script component props - onLoad and onError

The onLoad prop is a function called when the script finishes being loaded. The onError prop is a function called when the script fails to load. These props disable React's special treatment of scripts.

script component props - blocking and defer not recommended

The blocking prop (if set to 'render') instructs the browser not to render the page until the script is loaded; React provides more fine-grained control using Suspense. The defer prop prevents the browser from executing the script until the document is done loading but is not compatible with streaming server-rendered components; use the async prop instead.

style component special rendering caveats

When using the precedence prop with <style>, there are three caveats: (1) React will ignore changes to props after the style has been rendered and will issue a warning in development if this happens; (2) React will drop all extraneous props beyond href and precedence; (3) React may leave the style in the DOM even after the component that rendered it has been unmounted.

style component basic usage

The built-in browser <style> component lets you add inline CSS stylesheets to your document. Render it as <style>{` p { color: red; } `}</style>, where children must be a string containing CSS rules.

style component children prop

The children prop of <style> is a string, required. It contains the contents of the stylesheet as CSS rules.

style component precedence prop

The precedence prop is a string that tells React where to rank the <style> DOM node relative to others in the document <head>, determining which stylesheet can override others. React infers that precedence values discovered first are 'lower' and values discovered later are 'higher'. Stylesheets with the same precedence go together whether they are <link> or inline <style> tags or loaded using preinit functions.

style component href prop

The href prop is a string that allows React to de-duplicate styles that have the same href value. It should uniquely identify the stylesheet.

style component media prop

The media prop is a string that restricts the stylesheet to a certain media query.

style component nonce prop

The nonce prop is a string, a cryptographic nonce to allow the resource when using a strict Content Security Policy.

style component title prop

The title prop is a string that specifies the name of an alternative stylesheet.

style component blocking prop not recommended

The blocking prop is not recommended for use with React. If set to 'render', it instructs the browser not to render the page until the stylesheet is loaded. React provides more fine-grained control using Suspense.

style component special rendering behavior

React can move <style> components to the document's <head>, de-duplicate identical stylesheets, and suspend while the stylesheet is loading. To opt into this behavior, provide both href and precedence props. React will de-duplicate styles if they have the same href, and the precedence prop determines ranking in the <head>.

style component does not trigger Suspense while loading

Inline stylesheets will not trigger Suspense boundaries while they're loading, even if they load async resources like fonts or images.

style component with dynamic colors example

Example showing dynamic inline stylesheet: import { useId } from 'react'; function PieChart({data, colors}) { const id = useId(); const stylesheet = colors.map((color, index) => `#${id} .color-${index}: { color: "${color}"; }` ).join(); return ( <> <style href={"PieChart-" + JSON.stringify(colors)} precedence="medium"> {stylesheet} </style> <svg id={id}> … </svg> </> ); }

<select> component basic usage

The <select> component is a built-in browser component that renders a select box with options. Render it with nested <option> components to display selectable items.

<title> example setting document title

Example showing basic usage of <title> component: import ShowRenderedHTML from './ShowRenderedHTML.js'; export default function ContactUsPage() { return ( <ShowRenderedHTML> <title>My Site: Contact Us</title> <h1>Contact Us</h1> <p>Email us at support@example.com</p> </ShowRenderedHTML> ); }

<title> string interpolation for variables

To use variables in a <title> component, use string interpolation with template literals: <title>{`Results page ${pageNumber}`}</title>. Do not use JSX curly braces with a string and variable as separate expressions, as this creates an array and causes an error.

<title> component in React

The <title> component is a built-in browser component that specifies the document title in React. It can be rendered from any component in the React tree.

<title> children must be text only

The <title> component accepts only text as a child. You can pass text strings, numbers, or objects with a toString method, but the children must ultimately resolve to a single string. Using multiple JSX expressions like <title>Results page {pageNumber}</title> creates an array and causes an error; use string interpolation instead: <title>{`Results page ${pageNumber}`}</title>

<title> rendering location in DOM

React will always place the DOM element corresponding to the <title> component within the document's <head>, regardless of where in the React tree it is rendered.

<title> special behavior exceptions

The special head-placement behavior of <title> does not apply in two cases: (1) when <title> is within an <svg> component, where it represents an accessibility annotation for the SVG graphic; (2) when <title> has an itemProp prop, where it represents metadata about a specific part of the page rather than the document title.

<title> component supports common element props

The <title> component supports all common element props as defined in the React documentation for common props.

<title> multiple instances cause undefined behavior

Only render a single <title> at a time. If more than one component renders a <title> tag simultaneously, React will place all titles in the document head, which results in undefined behavior in browsers and search engines.

<Activity> for Selective Hydration

Activity boundaries naturally divide your component tree into independent units, allowing them to participate in React's Selective Hydration feature. This enables React to hydrate the app's initial server-rendered HTML in chunks, with parts of the app becoming interactive faster. Activity boundaries can improve hydration performance by letting React know which parts of your page can become interactive in isolation, even if the content is never hidden.

<Activity> Effects cleanup when hidden

When an Activity is hidden, all its children's Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.

<Activity> with DOM side effects pitfall

For certain tags like video, audio, and iframe, unmounting and hiding with Activity have different behavior. Since a hidden component's DOM is not destroyed, any side effects from that DOM will persist even after the component is hidden. If a component renders DOM that has a side effect and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.

<Activity> cleanup function example for video

To ensure a video element stops playing when hidden by an Activity boundary, use a useLayoutEffect with a cleanup function that calls pause() on the video element. Use useLayoutEffect instead of useEffect because the cleanup is conceptually tied to the component's UI being visually hidden, and the cleanup could be delayed by a Suspense boundary or View Transition if using a regular effect.

Give your agent this brain