Why props pass data to children in Svelte - Performance Evidence

Performance: Why props pass data to children

MEDIUM IMPACT

Passing data via props affects how efficiently components update and render in the browser.

Passing data from a parent component to a child component

Svelte

<ChildComponent {smallProp} />
<script>
  export let smallProp;
</script>

Passing only the needed small piece of data reduces unnecessary child updates and DOM changes.

📈 Performance Gainreduces re-renders and layout recalculations, improving interaction speed

Passing data from a parent component to a child component

Svelte

<ChildComponent {largeObject} />
<script>
  export let largeObject;
</script>

Passing a large or deeply nested object causes the child to re-render more often, even if only small parts change.

📉 Performance Costtriggers multiple re-renders and layout recalculations on minor changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing large objects as props	Many updates to child DOM	Multiple reflows per update	High paint cost due to layout changes	[X] Bad
Passing minimal, specific props	Few DOM updates	Single or no reflows	Low paint cost	[OK] Good

Rendering Pipeline

When props change, Svelte schedules updates to child components, triggering style recalculation, layout, and paint if DOM changes occur.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive due to DOM changes from prop updates

Core Web Vital Affected

INP

Passing data via props affects how efficiently components update and render in the browser.

Optimization Tips

1Pass only the data the child component needs as props.

2Avoid passing large or deeply nested objects directly as props.

3Minimize prop changes to reduce re-renders and layout recalculations.

Performance Quiz - 3 Questions

What is a performance risk when passing large objects as props to child components in Svelte?

A It improves the Largest Contentful Paint (LCP).

B It reduces the bundle size significantly.

C It causes unnecessary re-renders and layout recalculations.

D It prevents the child from receiving updates.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent component updates and layout recalculations triggered by prop changes.

What to look for: High number of reflows or long scripting times indicate inefficient prop passing causing excessive updates.

Practice

1. Why do we use props to pass data from a parent component to a child component in Svelte?

easy

A. To prevent the parent from updating its own data

B. To make the child component run its own independent code

C. To allow the child component to receive and use data from the parent

D. To stop the child component from rendering

Solution

1. Step 1: Understand the role of props in Svelte

   Props are used to send data from a parent to a child component so the child can use that data.

2. Step 2: Identify the purpose of passing data

   Passing data allows the child to display or work with information given by the parent, making components reusable and connected.

3. Final Answer:

   To allow the child component to receive and use data from the parent -> Option C

4. Quick Check:

   Props pass data to children = C [OK]

Hint: Props send data down from parent to child components [OK]

Common Mistakes:

• Thinking props control child component behavior independently
• Believing props stop parent data updates
• Assuming props prevent child rendering

2. Which of the following is the correct way to declare a prop named title in a Svelte child component?

easy

A. export let title;

B. const title = prop;

C. prop title;

D. let title;

Solution

1. Step 1: Recall Svelte prop declaration syntax

   In Svelte, child components declare props using export let to receive data from parents.

2. Step 2: Match the correct syntax

   The correct syntax is export let title;, which makes title a prop.

3. Final Answer:

   export let title; -> Option A

4. Quick Check:

   Props declared with export let = D [OK]

Hint: Use 'export let' to declare props in child components [OK]

Common Mistakes:

• Forgetting to use 'export' keyword
• Using 'prop' keyword which doesn't exist in Svelte
• Declaring props without export so they are not accessible

3. Given the parent component code:

<ChildComponent title="Hello" />

and the child component code:

export let title;
<h1>{title} World</h1>

What will be rendered on the page?

medium

A. {title} World

B. Hello World

C. World

D. Nothing will render due to error

Solution

1. Step 1: Understand prop passing from parent to child

   The parent passes the string "Hello" as the prop title to the child component.

2. Step 2: Check how the child uses the prop

   The child declares export let title; and uses it inside an <h1> tag with additional text " World".

3. Final Answer:

   <h1>Hello World</h1> -> Option B

4. Quick Check:

   Prop value used in child = A [OK]

Hint: Child shows parent's prop value inside its template [OK]

Common Mistakes:

• Expecting literal {title} text instead of prop value
• Forgetting to export the prop in child
• Assuming no output if prop is missing

4. What is wrong with this child component code if the parent passes a prop name?

let name;
<p>Hello {name}</p>

medium

A. The let keyword should be const

B. The {name} syntax is incorrect

C. The child component cannot receive props at all

D. The prop name is not declared with export let

Solution

1. Step 1: Check prop declaration in child component

   The child declares let name; but does not use export, so it won't receive the prop from the parent.

2. Step 2: Understand Svelte prop rules

   Props must be declared with export let to be accessible from the parent component.

3. Final Answer:

   The prop name is not declared with export let -> Option D

4. Quick Check:

   Missing export let for prop = B [OK]

Hint: Always use 'export let' to receive props in child [OK]

Common Mistakes:

• Using let without export for props
• Thinking const is required for props
• Believing child can't receive props without special syntax

5. You want to create a reusable Button component that changes its label based on a prop called text. Which approach correctly uses props to achieve this in Svelte?

hard

A. export let text;
<button>{text}</button>

B. let text = 'Click me';
<button>{text}</button>

C. export const text = 'Click me';
<button>{text}</button>

D. function Button(text) {
return `${text}`;
}

Solution

1. Step 1: Identify how to declare a prop in Svelte

   Props must be declared with export let to receive data from the parent.

2. Step 2: Check which option uses the prop correctly in the template

   export let text;
   <button>{text}</button>

   declares export let text; and uses {text} inside the button, making it reusable with different labels.

3. Final Answer:

   export let text; <button>{text}</button> -> Option A

4. Quick Check:

   Reusable button label via prop = A [OK]

Hint: Declare props with export let and use inside template [OK]

Common Mistakes:

• Setting default text without export to receive prop
• Using const instead of let for props
• Trying to create components as plain functions