How to use Svelte Context API?

State management is a complex topic for any web application. Usually, developers are forced to use complicated libraries to manage application state. However, the Svelte Context API makes life extremely easy for developers.

If you are new to Svelte, I would recommend you to start with the basics of Svelte.

1 – What is the Svelte Context API?

The Svelte Context API is a mechanism to pass data down through the component tree without using prop drilling. Due to this, we can use the Context API as a state management solution.

Prop drilling is an approach where we pass data through a component’s hierarchy by passing props from one component to another in the entire chain. In the long run, this approach can lead to bugs and maintenance issues.

Another options is to use Svelte event dispatcher. However, in that case, we have to handle events and take care to unsubscribe to the event handler and so on.

The Context API allows us to bypass the whole chain of intermediary components and still access the required data.

To work with the context, Svelte Context API provides two special methods setContext() and getContext(). Using these two methods, we can add data to the context and also get data from the context.

2 – Svelte Context API Demo

Let us now look at how to actually using the Context API in a Svelte component.

Consider that we have three components – TopComponent, MiddleComponent and LowerComponent. We want to pass a greeting message from the TopComponent to the LowerComponent without going through the MiddleComponent.

See below our code for the TopComponent.

<script>
  import { setContext } from 'svelte'
  import MiddleComponent from './components/MiddleComponent.svelte'

  setContext('greetingMsg', 'Hello, World')
</script>

<MiddleComponent />

In this component, we render the MiddleComponent without any props. We also import the setContext() function from svelte itself and call it within the script section.

The setContext() function accepts a key-value pair. Here, greetingMsg is the key and Hello, World is a value.

Next, we have the MiddleComponent.

<script>
  import LowerComponent from './components/LowerComponent.svelte'
</script>

<LowerComponent />

Here, we are simply rendering the LowerComponent. There is no other logic needed with regards to the context part.

At the end, we have the LowerComponent. See below:

<script>
  import { getContext } from 'svelte'

  const msg = getContext('greetingMsg')
</script>

<h2>Message</h2>
<p>{ msg }</p>

As you can see, we import the getContext() function. Using this function, we retrieve the value for the key greetingMsg from the context object. We can then simply render the retrieved message in the DOM.

As you can see, Context API makes it very easy to transfer data across components.

Conclusion

Svelte Context API is remarkably simple to use and highly efficient. Its ease of use makes it an automatic choice for simple state management within an application.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.