Computed

computed is where Ornata components define derived values.

Why computed exists

Computed values help when:

• multiple render callbacks need the same derived value
• a method needs a value derived from several state properties
• a more expensive derived value should only recompute when relevant state changes
• you want derived logic in one named place instead of repeating it inline

Computed values update automatically

When state changes, Ornata recomputes each computed value and stores the result on the component instance.

JavaScript

computed: {
    // 👇 Executes when any state changes
    countLabel() {
        return this.state.count === 1 ? "item" : "items";
    },
},

TypeScript

interface CounterComputed {
    countLabel: string;
}

computed: {
    // 👇 Executes when any state changes
    countLabel() {
        return this.state.count === 1 ? "item" : "items";
    },
},

Use the context to avoid unnecessary work

Each computed callback receives a context object with:

• currentValue the previously computed value for that property.
• changedProperty the state key that triggered the recomputation.

For simple computed values, you can usually ignore the context object. But, for more expensive computed values, these properties let you skip work when the updated state does not affect the result. This allows you to check whether the changed state is actually relevant before redoing heavier work.

JavaScript

computed: {
    filteredItems({ currentValue, changedProperty }) {
        if (
            changedProperty !== "query" &&
            changedProperty !== "items"
        ) {
            return currentValue ?? [];
        }

        return this.state.items.filter((item) =>
            item.label.includes(this.state.query)
        );
    },
}

TypeScript

interface ExampleComputed {
    filteredItems: string[];
}

computed: {
    filteredItems({ currentValue, changedProperty }) {
        if (
            changedProperty !== "query" &&
            changedProperty !== "items"
        ) {
            return currentValue ?? [];
        }

        return this.state.items.filter((item) =>
            item.label.includes(this.state.query)
        );
    },
}

Use computed from render and methods

Ornata recomputes each computed value before render and watch respond to the update. That means other parts of the component can read this.computed and get the latest derived value during the same update pass.

For example, once a computed value exists, different parts of the component can refer to the same derived data.

JavaScript

computed: {
    isOpen() {
        return this.state.open && this.state.enabled;
    },
},
methods: {
    announce() {
        console.log(this.computed.isOpen);
    },
}
render: {
    panel() {
        return {
            attributes: {
                hidden: !this.computed.isOpen,
            },
        };
    },
},

TypeScript

interface DisclosureComputed {
    isOpen: boolean;
}

interface DisclosureMethods {
    announce: () => void;
}

interface DisclosureElements {
    panel: HTMLElement;
}

computed: {
    isOpen() {
        return this.state.open && this.state.enabled;
    },
},
methods: {
    announce() {
        console.log(this.computed.isOpen);
    },
}
render: {
    panel() {
        return {
            attributes: {
                hidden: !this.computed.isOpen,
            },
        };
    },
},

A good mental model

If state is what the component knows, computed is what the component can infer from what it knows.