Context vs Props in Svelte: Key Differences and Usage

In Svelte, props are used to pass data directly from a parent component to its child via attributes, while context allows sharing data deeply across the component tree without passing props manually. Props are explicit and local, whereas context is implicit and useful for global or deeply nested data.

Quick Comparison

This table summarizes the main differences between props and context in Svelte.

Factor	Props	Context
Purpose	Pass data from parent to immediate child	Share data across multiple nested components
Data flow	Explicit and direct	Implicit and indirect
Usage	Via component attributes	Via setContext and getContext functions
Scope	One level down the tree	Any depth in the component tree
Reactivity	Reactive by default	Reactive if context value is reactive
Typical use case	Passing specific data to child	Sharing global settings or stores

Key Differences

Props in Svelte are the standard way to send data from a parent component to its direct child. You pass values as attributes when using the child component, making the data flow clear and explicit. This approach is simple and easy to follow but requires passing props through every intermediate component if the data is needed deeply nested.

Context is a special feature that lets a parent component provide data that any nested child can access without passing props through each level. It uses setContext to provide data and getContext to consume it. This is useful for global data like themes or stores but can make data flow less obvious since it skips explicit passing.

While props are reactive by default, context values are reactive only if the provided value itself is reactive, such as a Svelte store. Choosing between them depends on whether you want explicit, local data passing or implicit, global sharing.

Code Comparison

svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let message = 'Hello from parent via props';
</script>

<Child greeting={message} />

<!-- Child.svelte -->
<script>
  export let greeting;
</script>

<p>{greeting}</p>

Output

Hello from parent via props

Context Equivalent

svelte

<!-- Parent.svelte -->
<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';

  const message = 'Hello from parent via context';
  setContext('greeting', message);
</script>

<Child />

<!-- Child.svelte -->
<script>
  import { getContext } from 'svelte';
  const greeting = getContext('greeting');
</script>

<p>{greeting}</p>

Output

Hello from parent via context

When to Use Which

Choose props when: you want clear, explicit data flow from parent to child and the data is only needed by immediate children or a few levels down. Props keep your components easy to understand and maintain.

Choose context when: you need to share data or services deeply across many nested components without passing props through every level, such as themes, localization, or global stores. Context reduces prop drilling but can hide data flow, so use it for truly global or shared data.

Key Takeaways

Props pass data explicitly from parent to direct child via attributes.

Context shares data implicitly across any nested components using setContext/getContext.

Use props for simple, local data passing and context for global or deeply nested data.

Props are reactive by default; context values must be reactive themselves to update.

Context helps avoid prop drilling but can make data flow less clear.