Skip to main content
Version: v4.9


Store is a lightweight shared state library by the stencil core team. It implements a simple key/value map that efficiently re-renders components when necessary.

  • Lightweight
  • Zero dependencies
  • Simple API, like a reactive Map
  • Best performance


npm install @stencil/store --save-dev



import { createStore } from "@stencil/store";

const { state, onChange } = createStore({
clicks: 0,
seconds: 0,
squaredClicks: 0

onChange('clicks', value => {
state.squaredClicks = value ** 2;

export default state;


import { Component, h } from '@stencil/core';
import state from '../store';

tag: 'app-profile',
export class AppProfile {

componentWillLoad() {
setInterval(() => state.seconds++, 1000);

render() {
return (
<MyGlobalCounter />
Seconds: {state.seconds}
<br />
Squared Clicks: {state.squaredClicks}

const MyGlobalCounter = () => {
return (
<button onClick={() => state.clicks++}>



Create a new store with the given initial state. The type is inferred from initialState, or can be passed as the generic type T.

Returns a store object with the following properties.


The state object is proxied, I.E. you can directly get and set properties and Store will automatically take care of component re-rendering when the state object is changed.

store.on(event, listener)

Add a listener to the store for a certain action.

store.onChange(propName, listener)

Add a listener that is called when a specific property changes.


Get a property's value from the store.

store.set(propName, value)

Set a property's value in the store.


Reset the store to its initial state.


Use the given subscriptions in the store. A subscription is an object that defines one or more of the properties get, set or reset.


Like any global state library, state should be reset between each spec test. Use the dispose() API in the beforeEach hook.

import store from '../store';

beforeEach(() => {