# Preloading Resources

> Teaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.

- Skill: `majiayu000/preloading-resources` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/preloading-resources`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/preloading-resources/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/preloading-resources

---


# Resource Preloading APIs

React 19 adds functions for optimizing resource loading.

## Available Functions

```javascript
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
```

### prefetchDNS

Perform DNS resolution early:

```javascript
function App() {
  prefetchDNS('https://api.example.com');
  prefetchDNS('https://cdn.example.com');

  return <div>App content</div>;
}
```

### preconnect

Establish connection before needed:

```javascript
function App() {
  preconnect('https://api.example.com');

  return <div>App content</div>;
}
```

### preload

Preload resources without executing:

```javascript
function App() {
  preload('/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
  preload('/hero-image.jpg', { as: 'image' });
  preload('/critical.css', { as: 'style' });

  return <div>App content</div>;
}
```

### preinit

Preload and execute resource:

```javascript
function App() {
  preinit('/critical.js', { as: 'script' });
  preinit('/critical.css', { as: 'style', precedence: 'high' });

  return <div>App content</div>;
}
```

## Use Cases

**On Route Hover:**
```javascript
function NavLink({ to, children }) {
  const handleMouseEnter = () => {
    preload(`/api/data${to}`, { as: 'fetch' });
    preinit(`/routes${to}.js`, { as: 'script' });
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}
```

For comprehensive preloading documentation, see: `research/react-19-comprehensive.md` lines 811-834.