Spread props in Svelte - Deep Dive

Overview - Spread props

What is it?

Spread props in Svelte let you pass many properties to a component or element all at once using a simple syntax. Instead of writing each property separately, you can use the spread operator to include all properties from an object. This makes your code cleaner and easier to manage, especially when dealing with many props. It works by unpacking the properties and applying them as attributes or props.

Why it matters

Without spread props, you would have to write each property one by one, which can be repetitive and error-prone. Spread props save time and reduce mistakes by letting you pass groups of properties quickly. This is especially helpful when you want to forward all received props to a child component or HTML element. It makes your components more flexible and your code more maintainable.

Where it fits

Before learning spread props, you should understand basic Svelte components and how to pass props individually. After mastering spread props, you can explore advanced component patterns like forwarding events, slots, and context API. Spread props fit into the journey of writing clean, reusable, and scalable Svelte components.

Mental Model

Core Idea

Spread props unpack an object’s properties and pass them all at once as individual props or attributes to a component or element.

Think of it like...

Imagine you have a box full of different tools, and instead of handing each tool one by one to a friend, you just open the box and let them take all the tools at once. Spread props are like opening that box and sharing everything inside in one go.

Component or Element
  ┌─────────────────────────────┐
  │ <Component {...propsObject} /> │
  └─────────────────────────────┘
          ↓ Unpacks
  ┌─────────────────────────────┐
  │ prop1=value1 prop2=value2 ...│
  └─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Passing props individually in Svelte

Concept: Learn how to pass properties one by one to a Svelte component.

In Svelte, you pass props by writing them as attributes on a component tag. For example: Inside MyComponent, you declare 'export let name;' and 'export let age;' to receive these props.

Result

The component receives 'name' as 'Alice' and 'age' as 30, which it can use inside its template or script.

Understanding individual prop passing is essential before using spread props, as spread props build on this concept by automating it.

2

Foundation

Using objects to group props

Concept: Group multiple properties into a single object to organize data before passing.

Instead of passing many props separately, you can create an object holding all props: const user = { name: 'Alice', age: 30 }; Then pass it as a single prop: Inside MyComponent, you access 'user.name' and 'user.age'.

Result

The component receives one prop 'user' containing all data, but you must access each property manually inside the component.

Grouping props into an object helps organize data but can make accessing individual props inside components more verbose.

3

Intermediate

Introducing spread props syntax

🤔Before reading on: do you think spread props copy all object properties as separate props or pass the object as one prop? Commit to your answer.

Concept: Learn the syntax to unpack all properties from an object and pass them as individual props using {...object}.

Svelte supports spread props using the syntax: This unpacks all properties from 'user' and passes them as separate props. So 'name' and 'age' become individual props on MyComponent.

Result

The component receives 'name' and 'age' as separate props, just like passing them individually.

Knowing that spread props unpack objects into individual props helps write cleaner and more flexible component calls.

4

Intermediate

Using spread props with HTML elements

🤔Before reading on: do you think spread props work only with components or also with native HTML elements? Commit to your answer.

Concept: Spread props can also be used to pass multiple attributes to native HTML elements in Svelte.

You can write: where 'inputAttributes' is an object like { type: 'text', placeholder: 'Enter name' }. This applies all attributes to the input element.

Result

The input element renders with type='text' and placeholder='Enter name' attributes set.

Understanding that spread props work on both components and HTML elements increases their usefulness in Svelte.

5

Intermediate

Combining spread props with other props

🤔Before reading on: if you spread props and also write a prop explicitly, which value wins? Commit to your answer.

Concept: When combining spread props with explicit props, the explicit ones override any duplicates from the spread object.

Example: const props = { color: 'blue', size: 'medium' }; Here, 'size' is explicitly set to 'large', overriding 'medium' from props.

Result

The component receives 'color' as 'blue' and 'size' as 'large'.

Knowing the order of prop application prevents bugs where unexpected values override others.

6

Advanced

Forwarding all received props with spread

🤔Before reading on: do you think you can forward all props a component receives to a child component easily? Commit to your answer.

Concept: You can forward all props a component receives to a child by spreading the special '$$restProps' object.

Inside a component, Svelte collects all props not explicitly declared into '$$restProps'. You can write: This forwards all extra props to ChildComponent.

Result

ChildComponent receives all props passed to the parent except those explicitly handled.

Understanding '$$restProps' and spread lets you build flexible wrapper components that pass props transparently.

7

Expert

Spread props and reactive updates internals

🤔Before reading on: do you think changing a property inside a spread object automatically updates the component? Commit to your answer.

Concept: Spread props pass values at render time; reactive updates depend on Svelte's reactivity system and object identity changes.

If you mutate a property inside a spread object without changing the object reference, Svelte may not detect changes. To trigger updates, you must assign a new object: props = { ...props, color: 'red' }; This new object triggers reactivity and updates the component receiving spread props.

Result

The component updates when the spread props object changes identity, not just internal mutations.

Knowing how Svelte tracks changes with spread props prevents subtle bugs where UI does not update as expected.

Under the Hood

When Svelte compiles a component using spread props, it generates code that extracts each property from the spread object and passes them as individual props or attributes. At runtime, Svelte treats the spread object as a source of key-value pairs and applies them one by one. For reactive updates, Svelte tracks changes by comparing object references, so only when the spread object changes identity does it trigger re-rendering. Internally, '$$restProps' collects all undeclared props into an object for forwarding.

Why designed this way?

Spread props were designed to simplify passing many props without verbose code. The object unpacking pattern is common in JavaScript, so Svelte adopted it for familiarity and convenience. Using object identity for reactivity aligns with Svelte's compile-time optimization and minimal runtime overhead. Alternatives like deep tracking would be costly and complex, so this design balances simplicity and performance.

Component Usage
  ┌─────────────────────────────┐
  │ <Component {...propsObject} /> │
  └─────────────┬───────────────┘
                │ Unpacks
                ▼
  ┌─────────────────────────────┐
  │ prop1=value1 prop2=value2 ...│
  └─────────────┬───────────────┘
                │ Passed as
                ▼
  ┌─────────────────────────────┐
  │ Component receives props     │
  │ and renders accordingly      │
  └─────────────────────────────┘

Reactivity
  ┌─────────────────────────────┐
  │ propsObject changes identity │
  └─────────────┬───────────────┘
                │ Triggers
                ▼
  ┌─────────────────────────────┐
  │ Component updates UI         │
  └─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: does spreading an object pass the object itself as one prop or unpack all its properties? Commit to one.

Common Belief: Spreading an object passes the entire object as a single prop named after the object.

Reality: Spreading unpacks all properties and passes them as separate props with their own names.

Why it matters: Believing this causes confusion and bugs because the component expects individual props but receives one object, breaking access.

Quick: if you mutate a property inside a spread object, will the component always update? Commit yes or no.

Common Belief: Mutating any property inside a spread object automatically updates the component using it.

Reality: Svelte only tracks changes when the spread object itself changes identity; internal mutations without new object assignment do not trigger updates.

Why it matters: This misconception leads to UI not updating as expected, causing frustrating bugs that are hard to debug.

Quick: when combining spread props and explicit props, which one takes precedence? Commit your guess.

Common Belief: The first prop wins, so spread props override explicit props if they come first.

Reality: Explicit props override spread props if they come after the spread in the tag.

Why it matters: Misunderstanding this order causes unexpected prop values and bugs in component behavior.

Quick: can spread props be used only on components, or also on native HTML elements? Commit your answer.

Common Belief: Spread props only work on Svelte components, not on native HTML elements.

Reality: Spread props work on both components and native HTML elements, applying attributes accordingly.

Why it matters: Limiting spread props to components reduces their usefulness and leads to more verbose code for elements.

Expert Zone

1

When spreading props, Svelte merges them at compile time, but runtime reactivity depends on object identity, so immutable patterns are best.

2

Using '$$restProps' to forward props excludes explicitly declared props, allowing precise control over what is forwarded.

3

Spread props do not merge nested objects; only top-level properties are unpacked, so nested prop updates require careful handling.

When NOT to use

Avoid spread props when you need strict control over which props are passed or when prop names might conflict unexpectedly. Instead, pass props explicitly or use named forwarding. Also, avoid spreading large objects with many irrelevant properties to prevent performance issues.

Production Patterns

In real-world Svelte apps, spread props are often used in wrapper components to forward all extra props transparently. They are also common when passing HTML attributes dynamically, such as styling or event handlers. Experts combine spread props with '$$restProps' and explicit props to build flexible, reusable UI components.

Connections

JavaScript object destructuring

Spread props build on the same syntax and idea as object destructuring and spreading in JavaScript.

Understanding JavaScript object spread helps grasp how Svelte unpacks props, making the syntax feel natural and consistent.

React props spreading

Spread props in Svelte are conceptually similar to React's props spreading, both unpacking objects into props.

Knowing React's spread props helps transfer knowledge to Svelte, but Svelte's reactivity model differs, affecting updates.

Data forwarding in supply chains

Spread props are like forwarding a shipment with all items inside, ensuring the next stage gets everything needed without unpacking each item manually.

This connection shows how bundling and forwarding data efficiently is a common pattern beyond programming, improving workflow and reducing errors.

Common Pitfalls

#1 Mutating a property inside a spread object without changing the object reference, expecting UI to update.

Wrong approach:

props.color = 'red'; // mutate property directly

Correct approach:

props = { ...props, color: 'red' }; // create new object

Root cause:

Svelte tracks changes by object identity, so mutating properties inside the same object does not trigger reactivity.

#2 Passing spread props and explicit props in wrong order, causing unexpected overrides.

Wrong approach:

// props.size may override 'large'

Correct approach:

// explicit 'size' overrides props.size

Root cause:

Later props override earlier ones; misunderstanding order leads to bugs.

#3 Trying to spread a non-object value, causing runtime errors.

Wrong approach:

Correct approach:

Ensure the spread value is always an object:

Root cause:

Spreading requires an object; spreading null or undefined causes errors.

Key Takeaways

Spread props let you pass many properties at once by unpacking an object into individual props or attributes.

They work on both Svelte components and native HTML elements, making your code cleaner and more flexible.

Explicit props override spread props if they come after the spread in the tag, so order matters.

Svelte tracks reactivity by object identity, so changing properties inside a spread object without creating a new object does not update the UI.

Using '$$restProps' with spread props allows forwarding all extra props to child components, enabling flexible wrappers.