<h2 id="heading-concept">Concept</h2>
<p>'Suspense' helps us to load something later easily.</p>
<p>From now on, let me show you two examples, one with it and one without it.</p>
<h2 id="heading-one-without-it">One without It</h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codesandbox.io/s/without-suspense-pnb0en">https://codesandbox.io/s/without-suspense-pnb0en</a></div>
<h2 id="heading-one-with-it">One with It</h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codesandbox.io/s/with-suspense-ge26lg">https://codesandbox.io/s/with-suspense-ge26lg</a></div>
<h2 id="heading-code-splitting">Code Splitting</h2>
<p>This applies to the both examples.</p>
<p>Please copy the code and run it.</p>
<p>If you go to [Chrome DevTools &gt; Sources &gt; Page &gt; top &gt; the URL you belong to &gt; static/js], you can find 'Divide' is separated from 'bundle.js'.</p>


## Concept

'Suspense' helps us to load something later easily.

From now on, let me show you two examples, one with it and one without it.

## One without It

%[https://codesandbox.io/s/without-suspense-pnb0en]

## One with It

%[https://codesandbox.io/s/with-suspense-ge26lg]

## Code Splitting

This applies to the both examples.

Please copy the code and run it.

If you go to [Chrome DevTools > Sources > Page > top > the URL you belong to > static/js], you can find 'Divide' is separated from 'bundle.js'.

examplist

examplist

(React) Suspense

Concept

One without It

One with It

Code Splitting