LiveReact

Advanced

Lazy Loading

React.lazy and Suspense inside LiveView

  • dead view
  • React.lazy
  • Suspense

Key concepts

React.lazy wraps a dynamic import(), so the wrapped module is fetched as its own chunk only when it is first rendered, and Suspense renders a fallback while that chunk loads. Nothing about this is specific to LiveReact — it is ordinary React code splitting, running inside a Phoenix-rendered page.

Hello, Vite with Code Splitting and Lazy Loading!

I am a lazily loaded component!

My module is fetched only when React.lazy resolves it.

This example needs no LiveView. Open it standalone → to see it served with no socket.

How it works

The build tool splits the lazily imported component into its own bundle at build time. In this demo the chunk loads too fast to see the fallback, but the network tab shows a separate request for it, made only once Lazy renders — not on first page load.