Scribd
Upload
7 views

preconnect – React

The document provides an overview of the 'preconnect' function in React, which allows developers to establish an early connection to a server for resource loading. It details the function's usage, parameters, and caveats, including when and how to call it during rendering or in event handlers. Additionally, it emphasizes that multiple calls to preconnect for the same server are redundant and that preconnecting to the same server as the webpage is unnecessary.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

preconnect – React

The document provides an overview of the 'preconnect' function in React, which allows developers to establish an early connection to a server for resource loading. It details the function's usage, parameters, and caveats, including when and how to call it during rendering or in event handlers. Additionally, it emphasizes that multiple calls to preconnect for the same server are redundant and that preconnecting to the same server as the webpage is unnecessary.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

20/02/2025, 19:10 preconnect – React

v19

API REFERENCE APIS

preconnect
preconnect lets you eagerly connect to a server that you expect
to load resources from.

preconnect("https://example.com");

Reference

preconnect(href)

Usage

Preconnecting when rendering


Preconnecting in an event handler

Reference

preconnect(href)

To preconnect to a host, call the preconnect function from react-dom .

import { preconnect } from 'react-dom';

function AppRoot() {
preconnect("https://example.com");
// ...
}

See more examples below.

https://react.dev/reference/react-dom/preconnect 1/4
20/02/2025, 19:10 preconnect – React

The preconnect function provides the browser with a hint that it should
open a connection to the given server. If the browser chooses to do so, this
can speed up the loading of resources from that server.

Parameters

href : a string. The URL of the server you want to connect to.

Returns

preconnect returns nothing.

Caveats

Multiple calls to preconnect with the same server have the same effect
as a single call.
In the browser, you can call preconnect in any situation: while rendering a
component, in an Effect, in an event handler, and so on.
In server-side rendering or when rendering Server Components,
preconnect only has an effect if you call it while rendering a component
or in an async context originating from rendering a component. Any other
calls will be ignored.
If you know the specific resources you’ll need, you can call other functions
instead that will start loading the resources right away.
There is no benefit to preconnecting to the same server the webpage
itself is hosted from because it’s already been connected to by the time
the hint would be given.

Usage

Preconnecting when rendering

Call preconnect when rendering a component if you know that its children
will load external resources from that host.

import { preconnect } from 'react-dom';

https://react.dev/reference/react-dom/preconnect 2/4
20/02/2025, 19:10 preconnect – React

function AppRoot() {
preconnect("https://example.com");
return ...;
}

Preconnecting in an event handler

Call preconnect in an event handler before transitioning to a page or state


where external resources will be needed. This gets the process started earlier
than if you call it during the rendering of the new page or state.

import { preconnect } from 'react-dom';

function CallToAction() {
const onClick = () => {
preconnect('http://example.com');
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}

PREVIOUS

flushSync

NEXT

prefetchDNS

https://react.dev/reference/react-dom/preconnect 3/4
20/02/2025, 19:10 preconnect – React

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/preconnect 4/4

You might also like