Scribd
Upload
6 views4 pages

prefetchDNS - React

The prefetchDNS function in React allows developers to proactively resolve the IP address of a server to speed up resource loading. It can be called during component rendering or in event handlers, but has specific caveats regarding its effectiveness in server-side rendering. The function does not return a value and is most beneficial when anticipating resource needs from multiple external servers.

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
6 views4 pages

prefetchDNS - React

The prefetchDNS function in React allows developers to proactively resolve the IP address of a server to speed up resource loading. It can be called during component rendering or in event handlers, but has specific caveats regarding its effectiveness in server-side rendering. The function does not return a value and is most beneficial when anticipating resource needs from multiple external servers.

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 prefetchDNS – React

v19

API REFERENCE APIS

prefetchDNS
prefetchDNS lets you eagerly look up the IP of a server that you
expect to load resources from.

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

Reference

prefetchDNS(href)

Usage

Prefetching DNS when rendering


Prefetching DNS in an event handler

Reference

prefetchDNS(href)

To look up a host, call the prefetchDNS function from react-dom .

import { prefetchDNS } from 'react-dom';

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

See more examples below.

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

The prefetchDNS function provides the browser with a hint that it should
look up the IP address of a 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

prefetchDNS returns nothing.

Caveats

Multiple calls to prefetchDNS with the same server have the same effect
as a single call.
In the browser, you can call prefetchDNS 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,
prefetchDNS 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 prefetching the same server the webpage itself is
hosted from because it’s already been looked up by the time the hint
would be given.
Compared with preconnect , prefetchDNS may be better if you are
speculatively connecting to a large number of domains, in which case the
overhead of preconnections might outweigh the benefit.

Usage

Prefetching DNS when rendering

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

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

import { prefetchDNS } from 'react-dom';

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

Prefetching DNS in an event handler

Call prefetchDNS 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 { prefetchDNS } from 'react-dom';

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

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

PREVIOUS

preconnect

NEXT

preinit

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

You might also like