top of page
Logo der Online Agentur mdwp

Code-Splitting

React JS is a popular JavaScript library for building user interfaces, primarily for single-page applications. It is maintained by Facebook and a community of individual developers and companies.

One of the core features of React JS is 'Code-Splitting'. In web development, there's often a need to enhance the user experience by reducing the loading time of an application. One way to achieve this is by splitting the code into multiple chunks that can be loaded on demand or in parallel. This technique is called 'Code-Splitting'.

React provides a built-in way for performing code-splitting using the `React.lazy()` function and `Suspense` component. Here is an example:

```jsx
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}

export default MyComponent;
```
In this code snippet, the `OtherComponent` is loaded lazily, i.e., only when it's needed — when `MyComponent` is rendered. Until it's loaded, the `fallback` prop that is passed to the `Suspense` component (in this case, `<div>Loading...</div>`) is shown to the user.

Thus, with Code-Splitting, we divide the code into smaller chunks that are only downloaded when needed, hence improving the initial load time and performance of the application.

bottom of page