blob: d22931b9b73362751cb6188e2a8153400b6959b7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
---
layout: ../../layouts/content.astro
title: React + Loadable Components
published: false
---
<div class="notification">
This guide has an example repo:
<a href="https://github.com/snowpackjs/snowpack/examples/react-loadable-components">examples/react-loadable-components</a>
</div>
_Based on [app-template-react][app-template-react]_
You can lazy load React components in Snowpack when needed with React‘s builtin `React.lazy` ([docs][react-lazy]):
```jsx
import React, { useState, useEffect, Suspense } from 'react';
const Async = React.lazy(() => import('./Async'));
function Component() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Async />
</Suspense>
</div>
);
}
```
This works out-of-the-box in Snowpack, with no configuration needed!
### Learn more
- [`React.lazy` documentation on reactjs.org][react-lazy]
[react-lazy]: https://reactjs.org/docs/code-splitting.html#reactlazy
|
