Readonly props in Svelte - Performance & Optimization

Performance: Readonly props

MEDIUM IMPACT

Readonly props affect how data flows and updates between components, impacting rendering speed and user interaction responsiveness.

Passing data from parent to child component without allowing child to modify it

Svelte

<script>
  export let count;
  // Child treats count as readonly and emits event to parent
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function increment() {
    dispatch('increment');
  }
</script>
<button on:click={increment}>{count}</button>

Child does not modify prop directly, preventing unnecessary re-renders and maintaining predictable data flow.

📈 Performance GainSingle reflow per user interaction, better input responsiveness

Passing data from parent to child component without allowing child to modify it

Svelte

<script>
  export let count;
  // Child modifies count directly
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>{count}</button>

Child component modifies prop directly, causing unexpected re-renders and breaking one-way data flow.

📉 Performance CostTriggers multiple reflows and repaints due to uncontrolled state changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Child modifies prop directly	Multiple updates	Multiple reflows per update	High paint cost due to frequent changes	[X] Bad
Child treats prop as readonly and emits events	Minimal updates	Single reflow per interaction	Low paint cost	[OK] Good

Rendering Pipeline

Readonly props ensure that only the parent component manages state changes, reducing the number of style recalculations and layout updates in the browser.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout (reflows caused by unnecessary state changes)

Core Web Vital Affected

INP

Readonly props affect how data flows and updates between components, impacting rendering speed and user interaction responsiveness.

Optimization Tips

1Never modify props directly in child components to avoid extra re-renders.

2Use events to notify parents about changes instead of changing props.

3Readonly props improve input responsiveness by reducing layout recalculations.

Performance Quiz - 3 Questions

What is the main performance benefit of using readonly props in Svelte child components?

A Allows child components to update props faster

B Reduces bundle size by removing props

C Prevents unnecessary re-renders by avoiding direct prop mutation

D Improves CSS selector performance

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for excessive layout recalculations and scripting time.

What to look for: High number of reflows or long scripting tasks indicate bad prop handling; fewer reflows and shorter tasks indicate good readonly prop usage.