Why context shares data without prop drilling in Svelte - See It in Action

Why context shares data without prop drilling

📖 Scenario: Imagine you have a family tree app where the grandparent wants to share a message with the grandchild. Instead of passing the message through the parent, we use context to share it directly.

🎯 Goal: Build a simple Svelte app that uses context to share a message from a grandparent component to a grandchild component without passing props through the parent.

📋 What You'll Learn

Create a Grandparent.svelte component that sets a context value called message with the text 'Hello from Grandparent!'

Create a Parent.svelte component that does not receive or pass any props

Create a Grandchild.svelte component that reads the message from context and displays it

Use Svelte's setContext and getContext functions properly

💡 Why This Matters

🌍 Real World

Context sharing is useful in apps where many components need access to the same data, like user info or theme settings, without passing props through every level.

💼 Career

Understanding context is important for building clean, maintainable component-based apps in Svelte and other frameworks.

1

Set up the Grandparent component with context

In Grandparent.svelte, import setContext from 'svelte'. Create a variable called message with the value 'Hello from Grandparent!'. Use setContext with the key 'message' and the message variable to share this data. Add the <Parent /> component inside the markup.

Svelte

import { setContext } from 'svelte';

// Your code here

Hint

Remember to import setContext and call it before the markup.

2

Create the Parent component without props

In Parent.svelte, import and include the Grandchild component in the markup. Do not pass any props to Grandchild or receive any props in Parent.

Svelte

import Grandchild from './Grandchild.svelte';

Hint

This component just passes through the child without props.

3

Read the context in Grandchild component

In Grandchild.svelte, import getContext from 'svelte'. Use getContext with the key 'message' to get the shared message. Display the message inside a <p> tag.

Svelte

import { getContext } from 'svelte';

// Your code here

{message}

Hint

Use getContext to access the message set by the grandparent.

4

Combine components in App.svelte

In App.svelte, import the Grandparent component and include it in the markup to render the full component tree.

Svelte

import Grandparent from './Grandparent.svelte';

Hint

This is the root component that starts the app.