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.

Practice

1. In Svelte, what does it mean when we say props are readonly inside a child component?

easy

A. Props are only readonly if explicitly declared as such.

B. The parent component cannot send new values to the child.

C. The child component cannot change the value of props it receives from the parent.

D. Props can be changed freely inside the child component.

Solution

1. Step 1: Understand prop behavior in Svelte

   Props passed from parent to child are fixed values inside the child and cannot be reassigned there.

2. Step 2: Identify what readonly means here

   Readonly means the child cannot modify these props, ensuring data flows down safely.

3. Final Answer:

   The child component cannot change the value of props it receives from the parent. -> Option C

4. Quick Check:

   Props are readonly = child cannot modify [OK]

Hint: Props from parent are fixed inside child, no changes allowed [OK]

Common Mistakes:

• Thinking child can modify props directly
• Confusing readonly with immutable everywhere
• Believing parent cannot update props

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

easy

A. export const count;

B. let export count;

C. prop count;

D. export let count;

Solution

1. Step 1: Recall Svelte prop syntax

   Props are declared using export let to allow parent to pass values.

2. Step 2: Check each option

   Only export let count; is valid syntax for a prop declaration.

3. Final Answer:

   export let count; -> Option D

4. Quick Check:

   Props declared with export let = A [OK]

Hint: Props always start with 'export let' in Svelte [OK]

Common Mistakes:

• Using 'let export' instead of 'export let'
• Trying to use 'prop' keyword
• Using 'export const' which is not for props

3. Given this Svelte component code:

  <script>
  export let name = 'Guest';
  name = 'Alice';
  </script>
  <p>Hello {name}!</p>

What will happen when this component runs?

medium

A. It will display 'Hello Alice!' without errors.

B. It will cause a runtime error because props are readonly.

C. It will display 'Hello Guest!' and ignore the assignment.

D. It will display 'Hello undefined!' because of reassignment.

Solution

1. Step 1: Identify the prop and reassignment

   The prop name is declared with default 'Guest' but reassigned to 'Alice' inside the component.

2. Step 2: Understand readonly prop behavior

   Props are readonly inside the component, so reassigning name causes an error.

3. Final Answer:

   It will cause a runtime error because props are readonly. -> Option B

4. Quick Check:

   Reassigning prop inside component = error [OK]

Hint: Props cannot be reassigned inside component, causes error [OK]

Common Mistakes:

• Assuming default prop value can be changed inside
• Thinking reassignment silently fails
• Confusing local variables with props

4. You have this Svelte component:

<script>
  export let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Increment</button>
<p>Count: {count}</p>

What is the problem here?

medium

A. Error because you cannot reassign a readonly prop inside the component.

B. No problem, count will increment on button click.

C. The button click event is not set up correctly.

D. The initial value of count must be passed from parent.

Solution

1. Step 1: Analyze prop reassignment in increment()

   The function tries to increase count, which is a prop and readonly inside the component.

2. Step 2: Understand Svelte readonly prop rules

   Reassigning a prop inside the component causes an error because props are readonly.

3. Final Answer:

   Error because you cannot reassign a readonly prop inside the component. -> Option A

4. Quick Check:

   Modifying prop inside component = error [OK]

Hint: Props cannot be changed inside component, use local state instead [OK]

Common Mistakes:

• Thinking event handler fixes reassignment issue
• Assuming default prop value means local variable
• Ignoring readonly prop error

5. How can you allow a Svelte child component to update a value originally passed as a readonly prop from its parent?

hard

A. Use a local variable inside the child and dispatch an event to notify the parent of changes.

B. Directly reassign the prop inside the child component to update it.

C. Declare the prop with export const to make it writable.

D. Use bind:this on the prop to make it mutable.

Solution

1. Step 1: Recognize props are readonly in child

   Props cannot be changed inside the child component directly.

2. Step 2: Use event dispatch to update parent

   Child can keep a local copy and send events to parent to update the original value.

3. Final Answer:

   Use a local variable inside the child and dispatch an event to notify the parent of changes. -> Option A

4. Quick Check:

   Update via event dispatch and local state = C [OK]

Hint: Use local state + event dispatch to update parent from child [OK]

Common Mistakes:

• Trying to reassign props directly in child
• Misusing export const for writable props
• Confusing bind:this with prop binding