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.

Practice

1. What is the main reason to export a React component from a file?

easy

A. To make the component run faster

B. To hide the component from other files

C. To use the component in other files by importing it

D. To automatically style the component

Solution

1. Step 1: Understand the purpose of export

   Exporting a component allows it to be shared and used in other files.

2. Step 2: Connect export with import usage

   Without export, other files cannot import and use the component.

3. Final Answer:

   To use the component in other files by importing it -> Option C

4. Quick Check:

   Export shares components [OK]

Hint: Export lets you share components between files [OK]

Common Mistakes:

• Thinking export improves speed
• Believing export hides components
• Assuming export adds styles automatically

2. Which of the following is the correct syntax to export a React component as the default export?

easy

A. export MyComponent = () => Hello;

B. export default function MyComponent() { return Hello; }

C. default export MyComponent() { return Hello; }

D. export function default MyComponent() { return Hello; }

Solution

1. Step 1: Recall default export syntax

   The correct syntax is 'export default' followed by the function declaration.

2. Step 2: Check each option's syntax

   export default function MyComponent() { return
   Hello; } matches the correct syntax; others have invalid order or keywords.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Default export uses 'export default' [OK]

Hint: Default export starts with 'export default' [OK]

Common Mistakes:

• Placing 'default' after function name
• Using '=' with export incorrectly
• Mixing 'export' and 'default' order

3. Given these two files, what will be the output when App is rendered?

// Button.js
export function Button() { return <button>Click</button>; }
// App.js
import { Button } from './Button';
export default function App() { return <div><Button /></div>; }

medium

A. <div><button>Click</button></div>

B. Error: Button not found

C. <button>Click</button>

D. <div>Button</div>

Solution

1. Step 1: Understand named export and import

   Button is exported as a named export and imported with curly braces correctly.

2. Step 2: Analyze rendering in App component

   App renders a div containing the Button component, which returns a button element with text 'Click'.

3. Final Answer:

   <div><button>Click</button></div> -> Option A

4. Quick Check:

   Named export/import works = output includes button inside div [OK]

Hint: Named exports import with braces { } [OK]

Common Mistakes:

• Importing named export without braces
• Expecting Button text instead of button element
• Confusing default and named exports

4. What is wrong with this import statement?

import Button from './Button';

Given that Button.js contains:
export function Button() { return <button>Click</button>; }

medium

A. Button is a named export but imported as default

B. The file path is incorrect

C. Button component is not exported at all

D. The import statement is missing curly braces

Solution

1. Step 1: Check export type in Button.js

   Button is exported as a named export using 'export function Button'.

2. Step 2: Compare with import syntax

   Importing without braces means default import, but Button is not default exported.

3. Final Answer:

   Button is a named export but imported as default -> Option A

4. Quick Check:

   Named export must import with braces [OK]

Hint: Named exports need braces in import [OK]

Common Mistakes:

• Importing named export without braces
• Assuming default export without checking
• Ignoring export type in source file

5. You have two components in Widgets.js:

export function WidgetA() { return <div>A</div>; }
export function WidgetB() { return <div>B</div>; }

How should you import both components in Dashboard.js to use them?

hard

A. import WidgetA from './Widgets'; import WidgetB from './Widgets';

B. import WidgetA, WidgetB from './Widgets';

C. import * as Widgets from './Widgets';

D. import { WidgetA, WidgetB } from './Widgets';

Solution

1. Step 1: Identify export type in Widgets.js

   Both WidgetA and WidgetB are named exports.

2. Step 2: Choose correct import syntax for multiple named exports

   Use curly braces with both names inside: import { WidgetA, WidgetB } from './Widgets';

3. Final Answer:

   import { WidgetA, WidgetB } from './Widgets'; -> Option D

4. Quick Check:

   Multiple named exports import with braces and commas [OK]

Hint: Import multiple named exports with { A, B } [OK]

Common Mistakes:

• Trying to import multiple named exports as default
• Using separate default imports for each named export
• Using import * without accessing properties