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.