Context versus Stores

A Svelte application can be composed of one or many Svelte components. A Svelte component can be seen as a standalone unit, encapsulating its own reactive data and logic. In the previous chapter, we learned how two Svelte components – in particular, components in a parent and child relationship – communicate and pass data between each other. In this chapter, however, we are going to explore communication and passing data between components beyond the parent and child relationship.

Svelte provides two primitives to pass data across Svelte components – Svelte context and Svelte stores. Svelte context allows you to pass data from an ancestor to all children, while Svelte stores use the observer pattern to allow you to access reactive data across multiple unrelated Svelte components.

In the coming five chapters, we are going to explore the different use cases of Svelte context and Svelte stores. In this chapter, we will cover what Svelte...

Defining Svelte context

When you need to pass data from a parent component to a child component, the first thing you should think of is using props:

<Component props={value} />

What if you need to pass data from a parent component to a grandchild component? You could pass data as props from the parent component to the child component, and then from the child component to the grandchild component:

<!-- Parent.svelte -->
<Child props={value} />
<!-- Child.svelte -->
<script>
  export let props;
</script>
<GrandChild props={props} />

What if you need to pass data from a parent component to a great-grandchild component?

You could follow a process similar to what we did in the preceding code, passing the data through layers of components to reach the great-grandchild component.

This approach is called prop drilling. It is akin to drilling a hole through layers of components via props. This is frowned upon in most cases...

Defining the Svelte store

To understand why Svelte reactivity is limited within a Svelte component, we must first understand how Svelte’s reactivity works.

Unlike some other frameworks, Svelte reactivity works during build time. As Svelte compiles a Svelte component into JavaScript, Svelte looks at each variable and tracks the variable to see when the variable changes.

Instead of tracking all the variables throughout the application, Svelte limits itself to only analyzing and compiling one file at a time. This allows Svelte to compile multiple Svelte component files in parallel but also means that a Svelte component would not be aware of variable changes that happen in other files.

A common situation where a variable change is not tracked is when the variable is defined in a separate file and imported into the current component.

In the following code snippet, the quantity variable is imported from a separate file. Svelte will not track any changes to the quantity...

Choosing between a Svelte context and a Svelte store

The Svelte context and Svelte store are designed for very different use cases.

Here’s a recap: the Svelte context helps pass data from a parent component to all descendent components, while a Svelte store helps make data reactive across multiple Svelte components.

Although both the Svelte context and Svelte store are meant to pass data across Svelte components, they are designed for different use cases. So, choosing when to use a Svelte context and Svelte store is never an either-or situation.

You can use either a Svelte context, a Svelte store, or both to pass the same data across Svelte components.

To decide which one to use, I’ve come up with a 2x2 decision matrix:

Figure 8.2: A decision matrix for choosing a Svelte store, a Svelte context, or both

In this 2x2 decision matrix, there are two dimensions: local-global and static-reactive.

Depending on the kind of data you...

Summary

In this chapter, we learned what Svelte context and Svelte store are.

Although both Svelte context and Svelte store are meant for sharing data across multiple Svelte components, they are designed and used for different reasons.

Svelte context is meant for sharing the same data across all descendant components in the component tree, while Svelte store is meant for sharing reactivity across Svelte components.

Then, we explored the decision matrix on when to use a Svelte context, when to use a Svelte store, and when to use both.

This chapter served as an introduction to the Svelte context and the Svelte store. By now, you should have a good understanding of what they are and how they work, and feel confident in knowing when to use them. As we move forward, we will explore practical use cases that involve Svelte context and Svelte store, allowing you to apply these powerful concepts effectively in real-world scenarios.

In the next chapter, we will dive deeper into...