Context API vs stores in Svelte - When to Use Which

The Big Idea

Discover how to stop chasing props and start sharing data effortlessly in Svelte!

The Scenario

Imagine you have a Svelte app where many components need to share the same data, like user info or theme settings. You try passing props down through many layers manually.

The Problem

Passing props through many components is tiring and error-prone. If you want to update shared data, you must change every component that receives it. This leads to messy code and bugs.

The Solution

The Context API and stores let you share data easily across components without passing props everywhere. They keep your code clean and updates simple.

Before vs After

✗ Before

Parent.svelte: <Child user={user} />
Child.svelte: <Grandchild user={user} />
Grandchild.svelte: use {user}

✓ After

Create store: import { writable } from 'svelte/store'; export const user = writable(null);
Use store: import { user } from './store'; $user
Or use Context API to provide and consume data

What It Enables

You can share and update data globally in your app smoothly, making your components simpler and your app easier to maintain.

Real Life Example

Think of a shopping cart in an online store. Many parts of the app need to know what's in the cart. Using stores or Context API, all components see the same cart data instantly.

Key Takeaways

Passing props manually is slow and messy for shared data.

Context API and stores provide clean ways to share data globally.

They make your app easier to build, update, and maintain.