Readonly props in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child tries to modify a readonly prop in Svelte?

Consider a Svelte component that receives a prop. What will happen if the child component tries to change that prop's value?

Svelte

<script>
  export let count;
</script>

<button on:click={() => count = count + 1}>Increment</button>
<p>{count}</p>

A Svelte throws a compile-time error preventing the assignment.

B The component updates the count and re-renders with the new value.

C The assignment is ignored silently; count remains unchanged.

D A runtime error occurs because props are immutable inside the child.

💡 Hint

Think about how Svelte treats props inside child components.

In Svelte, props are readonly inside the child component. Trying to assign a new value to a prop inside the child causes a runtime error because props are immutable from the child's perspective.

❓ state_output

intermediate

What is the output when a readonly prop is updated in the parent?

Given a parent component passing a prop to a child, what will the child display if the parent updates the prop value?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let message = 'Hello';
  function update() {
    message = 'Hi';
  }
</script>
<button on:click={update}>Update Message</button>
<Child text={message} />

<!-- Child.svelte -->
<script>
  export let text;
</script>
<p>{text}</p>

A Always shows 'Hello' because props are readonly and cannot update.

B Shows 'Hi' immediately without clicking the button.

C Initially 'Hello', then changes to 'Hi' after clicking the button.

D Throws an error because the child tries to modify the prop.

💡 Hint

Consider how data flows from parent to child in Svelte.

Props are readonly inside the child, but the parent can update the value it passes. The child will reactively update its display when the parent changes the prop.

📝 Syntax

advanced

Which code correctly prevents a child from modifying a prop in Svelte?

Choose the code snippet that enforces the child component cannot modify the prop value.

A <script>export let value; // no reassignment allowed by Svelte</script>

B <script>export let value; Object.freeze(value);</script>

C <script>export let value; value = 10;</script>

D <script>export let value; value += 1;</script>

💡 Hint

Think about how Svelte treats props by default.

Svelte props are readonly by default inside the child. No special code is needed to prevent reassignment; attempting to assign to a prop causes a runtime error.

🔧 Debug

advanced

Why does this Svelte child component throw an error?

Examine the child component code below. Why does it throw an error when the button is clicked?

Svelte

<script>
  export let score;
  function increase() {
    score += 1;
  }
</script>
<button on:click={increase}>Increase</button>
<p>{score}</p>

A Because the button element is missing an aria-label.

B Because props are readonly and cannot be reassigned inside the child.

C Because score is not initialized with a default value.

D Because the function increase is not bound to the button click event.

💡 Hint

Recall how Svelte treats props inside child components.

Props in Svelte are readonly inside the child. Trying to reassign 'score' inside the child causes a runtime error.

🧠 Conceptual

expert

How can a Svelte child component communicate changes back to the parent when props are readonly?

Since props are readonly inside a Svelte child component, how can the child notify the parent to update a prop value?

A The child dispatches a custom event that the parent listens to and updates the prop accordingly.

B The child directly modifies the prop value using assignment.

C The child uses a global variable to change the prop value.

D The child imports the parent component and calls a method to update the prop.

💡 Hint

Think about how components communicate in Svelte without direct prop mutation.

In Svelte, children cannot modify props directly. Instead, they dispatch custom events to inform the parent, which can then update the prop value.