What are some examples of code splitting in React?

What are some examples of code splitting in React?

Code splitting in React allows you to split your code into smaller chunks, which can be loaded on demand. A common example is using React.lazy and Suspense to load components only when they are needed.

Can you show me a code example of using React.lazy?

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

What is the purpose of the Suspense component?

The Suspense component is used to wrap lazy-loaded components and provides a fallback UI (like a loading spinner) while the component is being loaded.

Are there any performance benefits to code splitting?

Yes, code splitting can significantly improve the performance of your application by reducing the initial load time, as only the necessary code is loaded at first.