Prepare a component's resource host
A component's descendants will load fonts, scripts, styles, or other resources from a known external origin.
React 19+ · Function
preconnect
preconnect hints that the browser should establish a connection to a server whose resources you expect to request. Calling it early can reduce resource-loading latency if the browser honors the hint.
- Since
- 19
How it works
Import preconnect from react-dom and call it with the origin of a server whose resources you expect to request. React gives the browser a connection hint; if honored, connection setup can begin earlier. The call can occur during browser rendering or in an event handler, while server rendering requires a rendering-related context to take effect.
Syntax
preconnect(href);Parameters
| Name | Type | Description |
|---|---|---|
href | string | The URL of the server you want to connect to. |
Returns
Nothing.
Key points
- Use it to start connecting to an expected resource host before the browser discovers the specific resource.
- This is a browser hint rather than a guarantee that a connection will be opened.
- Its performance benefit comes from moving connection setup earlier.
- Client code may invoke it during rendering, Effects, or event handlers.
- Rendering-time calls fit components whose descendants are expected to use the host.
- A user interaction can initiate the connection before navigation or state transition begins.
Common mistakes
- During server-side rendering or Server Components, calls outside component rendering or an async context originating from rendering do not take effect.
- Repeated calls for one server do not provide additional benefit.
Example: Preconnect during rendering
import { preconnect } from 'react-dom';
export default function AppRoot() {
preconnect('https://cdn.example.com');
return <main>Welcome</main>;
}The component hints that the browser should establish a connection to the CDN before descendants request resources from it.
When to use it
Start connection setup before transition
A click will navigate to a page or state that needs resources from a known server.
Assist server-rendered resource discovery
A server-rendered component tree knows an external host will be used during rendering.
Interview questions
QWhat does preconnect do?
preconnect is a react-dom API that hints to the browser that it should open a connection to a specified server. If the browser accepts the hint, resources from that server may load sooner.
Follow-up: How would you choose between preconnect and prefetchDNS? Use preconnect when you expect to request resources from the host; use DNS prefetch when you may not actually request anything and only want DNS resolution prepared.
QWhere and when should it be called?
Call it with the server URL, such as preconnect('https://cdn.example.com'). It is useful when you know a component's children will load external resources from that host.
Follow-up: When can an event handler use it? Call it before transitioning to a page or state that will need external resources, starting connection setup earlier than the destination render.
QAre there restrictions on the calling context?
In the browser, it can be called while rendering, in an Effect, or in an event handler. For server rendering and Server Components, it only takes effect during component rendering or an async context originating from component rendering.
Follow-up: What happens if the same host is passed repeatedly? The repeated calls have the same effect as one call, so deduplicating them is not required for correctness.
Related
prefetchDNSpreinitpreinitModulepreloadpreloadModule