What is code-splitting and its benefits in React?

What is code-splitting and its benefits in React?

• A. It is only applicable to server-rendered apps.
• B. Loads all code at once to avoid network latency.
• C. Splits the app into chunks loaded on demand; reduces initial bundle size; commonly done with React.lazy and dynamic import.
• D. Is a technique to duplicate components to improve performance.

Answer: (C)

Code-splitting is about breaking your app’s JavaScript into smaller chunks that are loaded only when needed. In React this typically means turning parts of your UI into lazy-loaded modules with something like React.lazy combined with dynamic import(). When a component is actually rendered for the first time, its chunk is fetched asynchronously, and you can show a fallback UI (via Suspense) while it loads. This approach reduces the initial bundle size, so the app can become interactive more quickly and use less bandwidth upfront—especially helpful for large apps where not every feature is needed right away. It’s not limited to server-rendered apps, it doesn’t require loading everything at once, and it isn’t about duplicating components. Instead, it enables on-demand loading of code to improve performance.

Code-splitting is about breaking your app’s JavaScript into smaller chunks that are loaded only when needed. In React this typically means turning parts of your UI into lazy-loaded modules with something like React.lazy combined with dynamic import(). When a component is actually rendered for the first time, its chunk is fetched asynchronously, and you can show a fallback UI (via Suspense) while it loads. This approach reduces the initial bundle size, so the app can become interactive more quickly and use less bandwidth upfront—especially helpful for large apps where not every feature is needed right away. It’s not limited to server-rendered apps, it doesn’t require loading everything at once, and it isn’t about duplicating components. Instead, it enables on-demand loading of code to improve performance.