State Management with Svelte - Props (Part 1)

Each component of a client-side application contains internal state that encapsulates its own data, which determines the component's behavior and stores business-related data for rendering. When composing many components into a multi-level hierarchy, components must communicate data and coordinate amongst each other to perform more complex tasks. For example, a 

 component might pass a list of search results to a 

 component to display suggestions based on the currently typed query. There are three common approaches to facilitate communication amongst the various components within a Svelte application: 

Having full control over state within an application allows developers to know how data flows throughout the application, better reason about the data and optimize accordingly. Modeling data flow with props, contexts and/or stores improves the organization of state, normalizes data to reduce instances of duplicated data and curtails the amount of time spent on debugging (quickly identify the component/s or portions of state responsible for a bug).

Below, and in two additional blog posts, I'm going to show you:

The simplest form of communication involves a parent component passing data to its direct child component/s via 

. This concept is widely adopted in other popular component-based libraries/frameworks, such as 

 keyword defines a prop that a component can accept from its consumers.

 from a higher-level component to a lower-level component in the component hierarchy. This means changes made to a prop in a child component will not propagate back to its parent component and yield any unwanted side effects. Unlike two-way data-binding in 

, which caused performance issues and modal updates to cascade, one-way data binding with props reduces the number of possible points of failure due to the predictable nature of component/application state.

If multiple props need to passed to a component, then consider packing all the props into an object and 

 them onto the component, which serves as a convenient shortcut for passing many props rather than individually specifying them.

If the parent component does not specify the prop on the child component, then its value will be set to 

 by default. However, instead of setting its value to 

, the prop can be set to a default initial value.

 allows those props to be modified within the component itself.

When clicking the button and incrementing the value of the prop 

, the newly incremented value is logged to the developers tool console, which indicates this prop being modified in the 

 component. However, this change is not propagated to the 

 tag remains zero no matter how many times you click on the "Increment" button.

 are not props, but instead, are readonly constants that can be imported into other components as named imports.

To export these variables for consumption in other components via an 

, which will execute the code within the 

 block once upon the evaluation of the module, not the instantiation of the component. 

 statements and then clicking on the button bound to the event handler containing this statement will result in an error being logged to the developers tool console and 

 not being incremented. Variables declared with 

 to a different value. This also applies to variables declared with 

 can be modified, but the reference to the object cannot be changed.

Suppose you decide to export a function that changes a value within the component it is exported from.

Clicking the "Increment" button will call the imported 

A function can be exported from an instance directly and accessed as a property on the component's reference, which can be obtained via the 

 directive. These properties are accessible after the component has been mounted to the DOM.

When clicking the "Increment" button, not only is 

 incremented, but its new value is displayed in the 

For grandchild components to receive data from grandparent components, that data must first be passed from the grandparent component to its child component (the grandchild's parent component), and then, that data must be passed from this parent component to its child component (the grandchild component). 

This process of explicitly and redundantly passing data from higher-level ancestor components to lower-level descendant components via props is known as 

. As the number of component layers increases, it becomes more difficult to track these props, especially when refactoring components and having to manually rename or remove props. In the above example, if we decide to rename the 

, then we would have to start renaming the prop at the 

 component and traverse down its subtree, renaming the prop at each subsequent component (the 

 prop whatsoever. It simply receives this prop and passes it directly to the 

 component. Having these types of props in our components can add unnecessary clutter to them and exacerbate our ability to understand and maintain these components.

Alternatively, to make data available to a component and its descendants without prop drilling, Svelte provides the 

 to learn more about Svelte's Context API.

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

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">State Management with Svelte - Props (Part 1)</h1><p>Each component of a client-side application contains internal state that encapsulates its own data, which determines the component's behavior and stores business-related data for rendering. When composing many components into a multi-level hierarchy, components must communicate data and coordinate amongst each other to perform more complex tasks. For example, a <code>&lt;SearchBar /&gt;</code> component might pass a list of search results to a <code>&lt;TypeaheadDropdown /&gt;</code> component to display suggestions based on the currently typed query. There are three common approaches to facilitate communication amongst the various components within a Svelte application: </p><ul><li><p><strong>Props</strong></p></li><li><p><strong>Context API</strong></p></li><li><p><strong>Stores</strong></p></li></ul><p>Having full control over state within an application allows developers to know how data flows throughout the application, better reason about the data and optimize accordingly. Modeling data flow with props, contexts and/or stores improves the organization of state, normalizes data to reduce instances of duplicated data and curtails the amount of time spent on debugging (quickly identify the component/s or portions of state responsible for a bug).</p><p>Below, and in two additional blog posts, I'm going to show you:</p><ul><li><p>How to manage application/component state with props, context and stores.</p></li><li><p>The differences between props, contexts and stores.</p></li><li><p>Several code snippets and demos demonstrating the capabilities and limitations of props, contexts and stores.</p></li><li><p>How to evaluate the trade-offs between Svelte stores and Redux as a state management solution in large Svelte applications. </p></li></ul><h2 class="heading-anchor-text" id="props"><span>Props</span><a class="d-inline" href="#props">#</a></h2><p>The simplest form of communication involves a parent component passing data to its direct child component/s via <strong><a href="https://svelte.dev/docs#Attributes_and_props" rel="noopener noreferrer nofollow">props</a></strong>. This concept is widely adopted in other popular component-based libraries/frameworks, such as <a href="https://reactjs.org/docs/components-and-props.html" rel="noopener noreferrer nofollow">React</a> and <a href="https://v3.vuejs.org/guide/component-props.html" rel="noopener noreferrer nofollow">Vue</a>. In Svelte, the <code><a href="https://svelte.dev/docs#1_export_creates_a_component_prop" rel="noopener noreferrer nofollow">export</a></code> keyword defines a prop that a component can accept from its consumers.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-v73vif1A_k1YjU72Mnx3N" id="cm-v73vif1A_k1YjU72Mnx3N">&lt;script&gt;
  import Child from './Child.svelte';
&lt;/script&gt;

&lt;Child message="Hello World!" /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-9_zOwJ6agBPlyBUQA_O2F" id="cm-9_zOwJ6agBPlyBUQA_O2F">&lt;script&gt;
  export let message;
&lt;/script&gt;

&lt;p&gt;{message}&lt;/p&gt;</textarea><p>With props, data flows <em>unidirectionally downwards</em> from a higher-level component to a lower-level component in the component hierarchy. This means changes made to a prop in a child component will not propagate back to its parent component and yield any unwanted side effects. Unlike two-way data-binding in <a href="https://docs.angularjs.org/guide/databinding" rel="noopener noreferrer nofollow">AngularJS</a>, which caused performance issues and modal updates to cascade, one-way data binding with props reduces the number of possible points of failure due to the predictable nature of component/application state.</p><h2 class="heading-anchor-text" id="spreading-props"><span>Spreading Props</span><a class="d-inline" href="#spreading-props">#</a></h2><p>If multiple props need to passed to a component, then consider packing all the props into an object and <strong>spreading</strong> them onto the component, which serves as a convenient shortcut for passing many props rather than individually specifying them.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm--JsdVHNGUtF3Rp-STNFu3" id="cm--JsdVHNGUtF3Rp-STNFu3">&lt;script&gt;
  import Child from './Child.svelte';

  let child = {
    heading: "Lorem Ipsum",
    message: "Hello World!",
    disclaimer: "Foo Bar"
  };
&lt;/script&gt;

&lt;Child {...child} /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-4hjRtbBdrobaIBc5oCUt5" id="cm-4hjRtbBdrobaIBc5oCUt5">&lt;script&gt;
  export let heading;
  export let message;
  export let disclaimer;
&lt;/script&gt;

&lt;h1&gt;{heading}&lt;/h1&gt;
&lt;p&gt;{message}&lt;/p&gt;
&lt;small&gt;{disclaimer}&lt;/small&gt;</textarea><h2 class="heading-anchor-text" id="default-props"><span>Default Props</span><a class="d-inline" href="#default-props">#</a></h2><p>If the parent component does not specify the prop on the child component, then its value will be set to <code>undefined</code> by default. However, instead of setting its value to <code>undefined</code>, the prop can be set to a default initial value.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-12ESNvFztlCl-r6UqcXZz" id="cm-12ESNvFztlCl-r6UqcXZz">&lt;script&gt;
  import Child from './Child.svelte';
&lt;/script&gt;

&lt;Child /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-QGhwCaSBEHGgVYaXYhVU0" id="cm-QGhwCaSBEHGgVYaXYhVU0">&lt;script&gt;
  export let message = 'Hello World!';
&lt;/script&gt;

&lt;p&gt;{message}&lt;/p&gt;</textarea><h2 class="heading-anchor-text" id="const,-class-and-function-exports-vs-let-exports"><span><code>const</code>, <code>class</code> and <code>function</code> Exports vs. <code>let</code> Exports</span><a class="d-inline" href="#const,-class-and-function-exports-vs-let-exports">#</a></h2><p>Specifying props in a component with <code>export let</code> allows those props to be modified within the component itself.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-PpHpp0MUzXoXyXFQlxH57" id="cm-PpHpp0MUzXoXyXFQlxH57">&lt;script&gt;
  import Child from './Child.svelte';

  let count = 0;
&lt;/script&gt;

&lt;p&gt;{count}&lt;/p&gt;
&lt;Child count={count} /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm--85jk6kXYSOl4Wc-tq1S7" id="cm--85jk6kXYSOl4Wc-tq1S7">&lt;script&gt;
  export let count = 0;

  const handleOnClick = (_evt) =&gt; {
    count++;

    console.log(count);
  }
&lt;/script&gt;

&lt;button type="button" on:click={handleOnClick}&gt;Increment&lt;/button&gt;</textarea><p>When clicking the button and incrementing the value of the prop <code>count</code>, the newly incremented value is logged to the developers tool console, which indicates this prop being modified in the <code>&lt;Child /&gt;</code> component. However, this change is not propagated to the <code>&lt;Parent /&gt;</code> component. The <code>count</code> displayed within its <code>&lt;p /&gt;</code> tag remains zero no matter how many times you click on the "Increment" button.</p><p>Try it out <a href="https://svelte.dev/repl/c450c88a415a435485729f4ba88069f1" rel="noopener noreferrer nofollow">here</a>.</p><p>Swapping <code>let</code> for <code>const</code> changes the behavior of <code>export</code>. Unlike variables declared with <code>export let</code>, variables declared with <code>export const</code>, <code>export function</code> or <code>export class</code> are not props, but instead, are readonly constants that can be imported into other components as named imports.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-mpP6tmN1K8NdX1fByC6xu" id="cm-mpP6tmN1K8NdX1fByC6xu">&lt;script&gt;
  import Child, { count } from './Child.svelte';

  const handleOnClick = (_evt) =&gt; {
    // Uncomment out the below line to see the "Illegal reassignment to import 'count'" error.
    // count++; 

    console.log(count);
  }
&lt;/script&gt;

&lt;p&gt;{count}&lt;/p&gt;
&lt;button type="button" on:click={handleOnClick}&gt;Increment&lt;/button&gt;
&lt;Child /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ohYge-DKag2g-A0xpABuS" id="cm-ohYge-DKag2g-A0xpABuS">&lt;script context="module"&gt;
  export const count = 0;

  const handleOnClick = (_evt) =&gt; {
    // Uncomment out the below line to see the "Uncaught TypeError: Assignment to constant variable." error.
    // count++;

    console.log(count);
  }
&lt;/script&gt;

&lt;button type="button" on:click={handleOnClick}&gt;Increment&lt;/button&gt;</textarea><p>Try it out <a href="https://svelte.dev/repl/856de7becc914e03bd7ce38a616995b3" rel="noopener noreferrer nofollow">here</a>.</p><p>To export these variables for consumption in other components via an <code>import</code> statement, declare the <code>&lt;script /&gt;</code> block with the attribute <code>context="module"</code>, which will execute the code within the <code>&lt;script /&gt;</code> block once upon the evaluation of the module, not the instantiation of the component. </p><p>Uncommenting out any of the <code>count++</code> statements and then clicking on the button bound to the event handler containing this statement will result in an error being logged to the developers tool console and <code>count</code> not being incremented. Variables declared with <code>export const</code> cannot be <em>reassigned</em> to a different value. This also applies to variables declared with <code>export function</code> and <code>export class</code>. </p><p><em>Note</em>: Properties of an object declared with <code>export const</code> can be modified, but the reference to the object cannot be changed.</p><p>Suppose you decide to export a function that changes a value within the component it is exported from.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-BlKAY8NodvMD3o9ogyRDJ" id="cm-BlKAY8NodvMD3o9ogyRDJ">&lt;script&gt;
  import Child, { incrementCount } from './Child.svelte';

  const handleOnClick = (_evt) =&gt; {
    incrementCount();
  }
&lt;/script&gt;

&lt;button type="button" on:click={handleOnClick}&gt;Increment&lt;/button&gt;
&lt;Child /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm--kl5XQl-IeTLq0J1zcd4M" id="cm--kl5XQl-IeTLq0J1zcd4M">&lt;script context="module"&gt;
  let count = 0;

  export const incrementCount = () =&gt; {
    count++;

    console.log(count);
  };
&lt;/script&gt;

&lt;p&gt;{count}&lt;/p&gt;</textarea><p>Clicking the "Increment" button will call the imported <code>incrementCount</code> function. When <code>incrementCount</code> is executed, the value of <code>count</code> is incremented. Because <code>count</code> is declared within a <code>&lt;script context="module" /&gt;</code> block, <code>count</code> is not reactive, and therefore, the <code>count</code> value displayed within the <code>&lt;p /&gt;</code> tag remains zero.</p><p>A function can be exported from an instance directly and accessed as a property on the component's reference, which can be obtained via the <code><a href="https://svelte.dev/docs#bind_component" rel="noopener noreferrer nofollow">bind:this</a></code> directive. These properties are accessible after the component has been mounted to the DOM.</p><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-Nwb06Rlv4CN2Xh_ddx9aZ" id="cm-Nwb06Rlv4CN2Xh_ddx9aZ">&lt;script&gt;
  import { onMount } from 'svelte';
  import Child from './Child.svelte';

  let childComponent = null;
	
	const handleOnClick = (_evt) =&gt; {
		childComponent.incrementCount();
		
		console.log(childComponent.message);
	};
&lt;/script&gt;

&lt;button type="button" on:click={handleOnClick}&gt;Increment&lt;/button&gt;
&lt;Child bind:this={childComponent}/&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-1GFkXyfywpJs5rv5YZ0pA" id="cm-1GFkXyfywpJs5rv5YZ0pA">&lt;script&gt;
  export const message = 'Hello World!';

  let count = 0;

  export const incrementCount = () =&gt; {
    count++;
  };
&lt;/script&gt;

&lt;p&gt;{count}&lt;/p&gt;</textarea><p>When clicking the "Increment" button, not only is <code>count</code> incremented, but its new value is displayed in the <code>&lt;p /&gt;</code>.</p><h2 class="heading-anchor-text" id="caveat/limitation-of-props"><span>Caveat/Limitation of Props</span><a class="d-inline" href="#caveat/limitation-of-props">#</a></h2><p>For grandchild components to receive data from grandparent components, that data must first be passed from the grandparent component to its child component (the grandchild's parent component), and then, that data must be passed from this parent component to its child component (the grandchild component). </p><p>(<code>Grandparent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-d5a3JtdBaATVhiYSDltko" id="cm-d5a3JtdBaATVhiYSDltko">&lt;script&gt;
  import Parent from './Parent.svelte';
&lt;/script&gt;

&lt;Parent message="Hello World!" /&gt;</textarea><p>(<code>Parent.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-bOY41oMOcBIy8pCbS_Nf7" id="cm-bOY41oMOcBIy8pCbS_Nf7">&lt;script&gt;
  import Child from './Child.svelte';
  
  export let message;
&lt;/script&gt;

&lt;Child message={message} /&gt;</textarea><p>(<code>Child.svelte</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-EfxT2Y8daIpMk-R-Rqfy_" id="cm-EfxT2Y8daIpMk-R-Rqfy_">&lt;script&gt;
  export let message;
&lt;/script&gt;

&lt;p&gt;{message}&lt;/p&gt;</textarea><p>This process of explicitly and redundantly passing data from higher-level ancestor components to lower-level descendant components via props is known as <strong>prop drilling</strong>. As the number of component layers increases, it becomes more difficult to track these props, especially when refactoring components and having to manually rename or remove props. In the above example, if we decide to rename the <code>message</code> prop to <code>greeting</code>, then we would have to start renaming the prop at the <code>&lt;Grandparent /&gt;</code> component and traverse down its subtree, renaming the prop at each subsequent component (the <code>&lt;Parent /&gt;</code> and <code>&lt;Child /&gt;</code> components). Also, the intermediate <code>&lt;Parent /&gt;</code> component does not make use of the <code>message</code> prop whatsoever. It simply receives this prop and passes it directly to the <code>&lt;Child /&gt;</code> component. Having these types of props in our components can add unnecessary clutter to them and exacerbate our ability to understand and maintain these components.</p><p>Alternatively, to make data available to a component and its descendants without prop drilling, Svelte provides the <strong>Context API</strong>. </p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline" href="#next-steps">#</a></h2><p>Proceed to the <a href="https://www.newline.co/@kchan/state-management-with-svelte-context-api-part-2--cecddbc5" rel="noopener noreferrer nofollow">next blog post</a> to learn more about Svelte's Context API.</p><p>If you want to learn more about Svelte, then check out <a href="https://www.newline.co/courses/fullstack-svelte" rel="noopener noreferrer nofollow">Fullstack Svelte</a>:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210220204556163_20210122223126406_fullstack-svelte.png" attachmentid="1a940725-2f98-46b5-b649-94821f8d0d20" contenteditable="false"><div></div></figure><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline" href="#sources">#</a></h2><ul><li><p><a href="https://svelte.dev/docs" rel="noopener noreferrer nofollow">Svelte Documentation</a></p></li></ul><p></p>

AUTHOR

Ken Chan

Each component of a client-side application contains internal state that encapsulates its own data, which determines the component's behavior and stores business-related data for rendering. When composing many components into a multi-level hierarchy, components must communicate data and coordinate…

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

State Management with Svelte - Props (Part 1)

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript