What is code splitting in React?
Breaking your bundle into chunks loaded on demand, so users download only the code they need. The most impactful use is lazy loading route components, so users only download the code for the page they visit, keeping the first load small.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Code Splitting and Lazy Loading in a Large React App
Use React.lazy to dynamically import the route component, and wrap it in a Suspense with a fallback. Without the fallback, React has nothing to show while the code loads, and you get an error.
Around routes or large independent sections, not around every small component. Too many boundaries add overhead; too few give a poor loading experience. Place them where a fallback makes sense to the user.
Wrap lazy components in an error boundary. If a chunk fails to load, like on a dropped network, the error boundary shows a retry option instead of a blank screen, which is a much better experience.
Still have questions?
Browse all our FAQs or reach out to our support team