--- title: "Lazy loading (and preloading) components in React 16.6" url: https://daily.dev/posts/lazy-loading-and-preloading-components-in-react-16-6-171jn2vzh source_url: https://medium.com/hackernoon/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d type: article source: "Rodrigo Pombo" published: 2026-03-31T12:30:05.297Z updated: 2026-03-31T12:39:56.948Z tags: ["javascript", "react", "performance"] reading_time: 6 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Lazy loading (and preloading) components in React 16.6 **[Rodrigo Pombo](https://daily.dev/sources/pomb)** · 6 min read · 0 upvotes · 0 comments ## Summary React 16.6 introduced React.lazy() and React.Suspense to simplify code splitting. Using a stock list/chart demo app, the post walks through converting a static import to a lazy-loaded component, reducing initial bundle size from 125KB to 36KB and cutting load time from 2470ms to 1546ms. It then covers two preloading strategies: triggering the dynamic import before React.lazy() so the chunk loads in the background, and pre-rendering the component hidden inside a Suspense boundary with a null fallback. Limitations of the hidden-div approach (portals, extra DOM nodes) are discussed, along with ideas for future improvements. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [I Reduced Our React Bundle by 70% Without Removing a Single Feature](https://daily.dev/posts/i-reduced-our-react-bundle-by-70-without-removing-a-single-feature-szhhzvcpd) · Medium · 18 upvotes · 3 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#performance](https://daily.dev/tags/performance) [View this post on daily.dev](https://daily.dev/posts/lazy-loading-and-preloading-components-in-react-16-6-171jn2vzh)