Readonly props in Svelte - Step-by-Step Execution

Concept Flow - Readonly props

Parent Component

↓

Pass prop to Child

↓

Child Component receives prop

↓

Child tries to modify prop?

Yes→Error or Warning

No↓

Child uses prop as readonly value

Parent sends data to child as props. Child can read but cannot change props. Trying to change props causes error.

Execution Sample

Svelte

<script>
  export let count;
</script>

<p>{count}</p>

Child component receives a prop 'count' and displays it without changing it.

Execution Table

Step	Action	Prop 'count' Value	Modification Attempt	Result
1	Parent sets count=5	5	No	Prop passed to child as 5
2	Child renders with count=5	5	No	Displays 5
3	Child tries count = 10	5	Yes	Error: Cannot assign to 'count' - readonly prop
4	Child uses count without change	5	No	Displays 5
5	Parent updates count=7	7	No	Child re-renders with 7

💡 Child cannot modify 'count' prop; it remains readonly.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5
count	undefined	5	5 (unchanged, error on modify)	7

Key Moments - 2 Insights

Why can't the child component change the value of a prop?

Props are readonly in Svelte. The execution_table row 3 shows an error when the child tries to assign a new value to 'count'. Props are meant only for passing data down.

What happens if the parent changes the prop value?

As shown in execution_table row 5, when the parent updates 'count' to 7, the child automatically re-renders with the new value.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 3 when the child tries to modify it?

A 5

B 10

C undefined

D 7

💡 Hint

Check the 'Prop 'count' Value' column at step 3 in execution_table.

At which step does the parent update the prop value to 7?

A Step 2

B Step 3

C Step 5

D Step 4

💡 Hint

Look at the 'Action' column in execution_table for parent updates.

If the child tries to modify the prop, what will happen?

A The prop value changes successfully

B An error occurs preventing modification

C The parent prop also changes

D Nothing happens, silently ignored

💡 Hint

Refer to the 'Modification Attempt' and 'Result' columns in execution_table step 3.

Concept Snapshot

Readonly props in Svelte:
- Parent passes data as props to child
- Child can read but cannot modify props
- Attempting to assign to a prop causes an error
- Parent updates cause child to re-render
- Props are one-way data flow from parent to child

Full Transcript

In Svelte, props are values passed from a parent component to a child component. The child can use these props to display or compute things but cannot change them. If the child tries to assign a new value to a prop, Svelte will throw an error because props are readonly. When the parent changes the prop value, the child automatically updates to reflect the new value. This ensures a clear one-way data flow and avoids confusion about where data changes happen.