Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST
Start learning

React 19+ · Function

prefetchDNS

Hints that the browser should resolve a server's IP address ahead of an expected resource request. Use it to reduce DNS delay for anticipated external resources, while remembering that the browser may ignore the hint.

Since
React 19

How it works

Call prefetchDNS with the origin of a server that the upcoming UI is expected to contact. The browser may resolve that host early, reducing DNS lookup delay when its resources are requested. In client code it can run during rendering, effects, or event handlers; during server rendering, only calls associated with component rendering or its originating async context take effect.

Syntax

prefetchDNS(href)

Parameters

NameTypeDescription
hrefstringThe URL of the server you want to connect to.

Returns

Nothing.

Key points

  • It hints that the browser should resolve a server's IP address before the server's resources are needed.
  • This is a browser hint, so the browser decides whether to perform the lookup.
  • The optimization can reduce connection startup latency for later resource requests.
  • Client-side calls are allowed during render, effects, event handlers, and other browser situations.
  • Rendering-time calls suit components whose descendants will soon use the host.
  • An event-handler call can begin DNS work before navigation or a state transition.

Common mistakes

  • During server-side rendering or Server Components, calls outside component rendering or an async context originating there have no effect.
  • Repeated calls for one server do not provide additional benefit.

Example: Prefetch a resource host

import { prefetchDNS } from "react-dom";

function AppRoot() {
  prefetchDNS("https://cdn.example.com");
  return <main>Welcome</main>;
}

This starts DNS resolution for the CDN while the component renders, before a child or later navigation requests resources from that host.

When to use it

Prepare a host during rendering

A component's children will load fonts, scripts, images, or other resources from a known external host.

Start DNS lookup before navigation

A user action will navigate to a page that depends on another origin.

Prepare an upcoming state

An interaction is expected to reveal UI that fetches resources from a third-party server.

  • preconnect
  • preload
  • preinit
  • preinitModule

Source: prefetchDNS - React. Checked 2026-10-15.