Svelte Context API: Avoid Prop-Drilling
Svelte's Context API lets a parent component provide data to any descendant, avoiding 'prop-drilling'. It's ideal for sharing app-wide state like user info or themes. The key footgun: calling getContext without a parent setContext will throw an error.
Why it exists
In large component trees, passing data from a top-level component to a deeply nested one requires 'prop-drilling'—passing the same prop through many intermediate layers that don't use it. This is tedious, error-prone, and makes refactoring difficult. The Context API was created to solve this problem directly.
The mental model
Think of context as a private, scoped 'key-value store' for a component and all its children. A parent component puts a value into the store with a specific key, and any descendant, no matter how deeply nested, can ask for the value using that same key. It's a shortcut that bypasses the component hierarchy.
How it works
A parent component uses setContext(key, value) to make a piece of data available to its descendants. Any child component can then retrieve that value by calling getContext(key). The key can be any value, but a unique string or symbol is used to prevent collisions. As of Svelte 5.40, the preferred method is createContext(). This function returns a type-safe [get, set] pair of functions, which removes the need for manual keys and improves code safety.
When to use it
Use context for data that is 'global' to a component subtree but not the entire application. This is perfect for sharing user authentication status within a logged-in layout, providing a UI theme ('dark' or 'light') to a section of the app, or making a shared data object available to a set of related components.
When not to use it
Context is not a replacement for props. If a component's direct parent can easily provide the data, use props for clearer data flow. Overusing context can make your application harder to debug because it obscures where data is coming from. For complex, app-wide reactive state, Svelte Stores are often a more suitable tool.
One canonical example
A parent component, ThemeWrapper.svelte, wants to provide a theme name to a deeply nested Button.svelte. Instead of passing a theme prop through multiple layers, ThemeWrapper.svelte calls setContext('theme', 'dark'). Later, Button.svelte can directly access this by calling const theme = getContext('theme'). This decouples the Button from the intermediate components.
Interview question
When is Svelte's Context API the most appropriate solution for sharing data?
- a.To provide data to a specific component subtree, bypassing intermediate components.Correct
- b.To create a global, mutable object that all components can modify and react to across the entire application.
- c.When a component needs to pass data directly to its immediate child for clear data flow.
- d.For managing complex, reactive state that needs to be accessible by any component throughout the entire application.
Why? this is the answer
The Context API is specifically designed to avoid prop-drilling by making data available to all descendants within a specific component subtree. For app-wide reactive state, Svelte Stores are generally preferred, and for direct parent-child communication, props are more suitable.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
- #svelte
- #state management
- #prop drilling
- #context api
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.
See open roles