State Management with Svelte - Context API (Part 2)

 - If you are unfamiliar with props in Svelte applications, then please read this 

 before proceeding on. You must understand the limitations of props to better understand the Context API and how it addresses those limitations.

For components that need to share data to lower-level descendant components (and slotted content) within the same subtree, the 

 offers two methods for these components to communicate data without prop drilling or dispatching events: 

, which is a value (primitive or object) representing data that can only be accessed by the component's descendants via the 

 helps to retrieve the context value from the closest ancestor component with a defined context corresponding to this key.

For a descendant component to consume context defined within one of its ancestors, call the 

: The context key does not have to be a string; it can be any value. Using a string as the context key has the downside of conflicting with other contexts with the same context key, especially if these contexts belong to third-party libraries that you have little to no control over. Using an object literal as the context key ensures that its context won't conflict with other contexts since object literals are compared via referential equality.

 must be called during component initialization at the top-level of 

 components' example and refactor the code by substituting the props with context. 

This approach is much cleaner compared to the props approach. The intermediate 

 component no longer contains any reference to 

 component and forwarded it directly to the 

 component. Only the descendant components concerned with 

At a minimum, a simple scatterplot consists of two labeled axes (an x-axis and y-axis) and some dots. Optionally, a scatterplot may display a legend mapping a dot's color to a specific category it belongs to (for classification purposes).

 component into its constituent components, then you might arrive at this component hierarchy:

 is commonly the root element of interactive data visualizations, especially those built using 

When you include props, then you may notice how reliant these components are on the same set of props.

As the requirements of the visualization grow and more features are added, passing these props explicitly to each of these components becomes repetitive and unmaintainable.

Visit this simple Svelte REPL demo to see how the Context API allows these child components to receive all of this data from a single, common parent component (

The scatterplot shows the relationship between the petal length and petal width of flowers classified as species of Iris (Iris setosa, Iris virginica and Iris versicolor). If you have a background in a data science, statistics or machine learning background, then you are likely to have encountered and explored this multivariate dataset when learning introductory classification algorithms.

 component fetches the Iris dataset from a GitHub Gist, and it establishes the petal length as the independent variable (

) and petal width as the dependent variable (

) to be plotted in the scatterplot. Each data point is categorized as one of three flower species: setosa, versicolor and virginica. Once the data is fetched, the 

 component is rendered using this data and custom configuration options.

 component can accept data from either a remote source (as shown above via 

, etc.) or locally with this arrangement. The other props passed to the 

 component configure certain aspects of the scatterplot such as its dimensions and axes.

To avoid any conflicts with other contexts, the context key for the scatterplot will be a literal object. This object will be referenced by all of the scatterplot's constituent components when they access the context set by the 

 component receives a set of props from a consuming component (in this case, 

, which contains these values. Notice how no props are passed to the 

 components because each of these components will access those values directly from this context via 

 pixels away from the left-side of the visualization, we must automatically translate all of the dots horizontally by this same amount of pixels to ensure that they are drawn within the confines of these axes (

). Then, each data point is drawn as a dot with a radius of three pixels, colored based on its flower species and positioned based on the values of 

To generate an axis' tick marks, call the 

). The number of tick marks created is based on the number passed to the 

 method. To space the tick marks out evenly, translate each tick mark by a number of pixels determined by 

 for each y-axis' tick mark). To position the labels (

 element), space them slightly away from the halfway point of its corresponding axis line (

The legend is placed 25 pixels to the right of the y-axis (adding 

 for the horizontal translation ensures the legend is shifted 

 pixels from the y-axis) and 25 pixels from the top-side of the canvas. Each category is displayed with its unique color representation and label.  

React Context and Caveats of the Context API

If you have built React applications, then up to this point, Svelte's Context API may appear similar to 

sharing values between components of the same subtree without having to explicitly specify props at every level of the component hierarchy

 creates the context, sets its value and automatically provides access to this context for all of the component's descendants. In React, you must first create the context with the 

import { createContext } from 'react';

export const ScatterplotCtx = createContext();  

 is useful for testing components in isolation without having to wrap them within a provider component. This value serves as a fallback for when a component has no matching provider (for example, 

For components to access this context value, create a provider component and have it wrap all of these components:

import React, { createContext } from 'react';
import { ScatterplotCtx } from './contexts';
// Component Imports

const Scatterplot = ({
  data,
  labels,
  dimensions,
  xAccessor,
  yAccessor,
  categoryKey,
  colors
}) => {
  // ...

  return (
    <ScatterplotCtx.Provider value={{
      data,
      labels,
      dimensions,
      xAccessor,
      yAccessor,
      categoryKey,
      colors
    }}>
      <svg height={dimensions.height + 30} width={dimensions.width} viewBox={`0 0 ${dimensions.width} ${dimensions.height + 30}`}>
        <Dots />
        <XAxis />
        <YAxis />
        {categories.length > 0 && (
          <Legend />
        )}
      </svg>
    </ScatterplotCtx.Provider>
  );
}

import React, { useContext } from 'react';
import { ScatterplotCtx } from './contexts';

const Dots = () => {
  const { categoryKey, data, dimensions, colorScale, xScale, yScale } = useContext(ScatterplotCtx);

  return (
    <g transform={`translate(${dimensions.margins.left}, 0)`}>
      {data.map(item => (
        <circle r="3" cx={xScale(item.x)} cy={yScale(item.y)} fill={colorScale ? colorScale(item[categoryKey]) : 'black'} />
      ))}
    </g>
  )
}

In React, updates to the provider component will cause the 

 hook to trigger a rerender using the latest context value passed to this provider component.

However, in Svelte, descendant components cannot receive updates from a context whenever its set to a different value via a subsequent call to 

. These components are only able to access the values made available to them from their ancestor component (the one setting the context) during component initialization. Since the components are not updated with the new context value and not re-rendered as a result of those changes, we cannot consider the Context API as 

 feature of Svelte. For reactivity, we must use 

, which allow components to access data and subscribe to updates from global data stores (not restricted to a subtree of components).

If you want to learn more about Svelte, then check out 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

State Management with Svelte - Context API (Part 2)

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript