preconnectLink for this heading

January 6, 2025 · View on GitHub

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 Link for Reference

`preconnect(href)`Link for this heading

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.

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 Link for Parameters

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

Returns Link for Returns

preconnect returns nothing.

Caveats Link for 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 Link for Usage

Preconnecting when rendering Link for 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';

function AppRoot() {

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

  return ...;

}

Preconnecting in an event handler Link for 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>

  );

}