Exporting and importing components in React - Performance & Optimization

Performance: Exporting and importing components

MEDIUM IMPACT

This concept affects the bundle size and initial load time by controlling how components are included and shared in the app.

Sharing React components across files efficiently

React

export function SmallComponent() { return <div>Small Component</div>; }

// Import only what is needed
import { SmallComponent } from './SmallComponent';

Named exports allow tree shaking to remove unused code, reducing bundle size.

📈 Performance Gainreduces bundle size by 10-20kb, improving LCP by 50-100ms

Sharing React components across files efficiently

React

export default function BigComponent() { return <div>Big Component</div>; }

// Importing everything
import BigComponent from './BigComponent';

Default exports encourage importing the entire module even if only part is needed, increasing bundle size.

📉 Performance Costadds unnecessary code to bundle, increasing initial load time by 10-20kb in typical apps

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default export importing whole module	No extra DOM nodes	No extra reflows	No direct paint cost	[X] Bad
Named export importing only needed components	No extra DOM nodes	No extra reflows	No direct paint cost	[OK] Good

Rendering Pipeline

When components are imported, the browser loads the JavaScript bundle. Larger bundles delay parsing and execution, slowing style calculation and layout.

→Parsing & Compilation

→Style Calculation

→Layout

→Paint

⚠️ BottleneckParsing & Compilation due to larger bundle size

Core Web Vital Affected

LCP

This concept affects the bundle size and initial load time by controlling how components are included and shared in the app.

Optimization Tips

1Use named exports to enable tree shaking and reduce bundle size.

2Import only the components you need to avoid loading unused code.

3Avoid default exports for large modules to improve initial load performance.

Performance Quiz - 3 Questions

How does using named exports instead of default exports affect bundle size?

A It allows tree shaking to remove unused code, reducing bundle size.

B It increases bundle size by duplicating code.

C It has no effect on bundle size.

D It causes the entire app to reload on every import.

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, filter by JS files, check bundle size. Then use Performance tab to record page load and see parsing time.

What to look for: Look for large JS bundle sizes and long scripting times indicating slow parsing and execution.