Context vs stores decision in Svelte - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a writable store in Svelte.

Svelte

import { [1] } from 'svelte/store';

const count = [1](0);

Drag options to blanks, or click blank then click option'

Awritable

Breadable

Cderived

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' which is for read-only stores.

Trying to import 'context' which is not a store function.

In Svelte, writable creates a store that can be updated. This is used for reactive state.

2fill in blank

medium

Complete the code to set a context value in a Svelte component.

Svelte

import { setContext } from 'svelte';

setContext('[1]', 42);

Drag options to blanks, or click blank then click option'

Acount

Bstore

Cvalue

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'context' as the key which is too generic.

Using 'store' which is not descriptive.

The first argument to setContext is a key string to identify the context value.

3fill in blank

hard

Fix the error in the code to get a context value in a Svelte component.

Svelte

import { [1] } from 'svelte';

const count = getContext('count');

Drag options to blanks, or click blank then click option'

Acontext

BsetContext

CuseContext

DgetContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setContext' when trying to get a value.

Using 'useContext' which is not a Svelte function.

getContext is used to retrieve a value set by setContext.

4fill in blank

hard

Fill both blanks to create a derived store from two writable stores.

Svelte

import { writable, derived } from 'svelte/store';

const a = writable(1);
const b = writable(2);
const sum = [1]([a, b], ([$a, $b]) => $a [2] $b);

Drag options to blanks, or click blank then click option'

Aderived

B+

C-

Dwritable

Attempts:

3 left

💡 Hint

Common Mistakes

Using writable instead of derived.

Using subtraction instead of addition.

derived creates a store based on others. The function adds the two values.

5fill in blank

hard

Fill all three blanks to decide when to use context or stores in Svelte.

Svelte

/* Use context when you want to pass data [1] components without prop drilling.
   Use stores when you want [2] reactive state shared [3] many components. */

Drag options to blanks, or click blank then click option'

Abetween

Ba

Cacross

Dinside

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'between' and 'across' for data flow.

Using 'inside' which doesn't fit the meaning.

Context passes data between components without props.
Stores hold a reactive state shared across many components.