content: [API Reference](https://react.dev/reference/react)
  
  [APIs](https://react.dev/reference/react-dom)
  
  # prefetchDNS[Link for this heading]()
  
  `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[Link for Reference]()
  
  ### `prefetchDNS(href)`[Link for this heading]()
  
  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.]()
  
  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[Link for Parameters]()
  
  - `href`: a string. The URL of the server you want to connect to.
  
  #### Returns[Link for Returns]()
  
  `prefetchDNS` returns nothing.
  
  #### Caveats[Link for 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](https://react.dev/reference/react-dom) 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`](https://react.dev/reference/react-dom/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[Link for Usage]()
  
  ### Prefetching DNS when rendering[Link for Prefetching DNS when rendering]()
  
  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[Link for 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>
  
    );
  
  }
  ```
  
  [Previouspreconnect](https://react.dev/reference/react-dom/preconnect)
  
  [Nextpreinit](https://react.dev/reference/react-dom/preinit)