SolidJS•16mo ago

What are the differences? Produce vs regular setStore

This is Astro + SolidJS components. Question: Besides produce allowing to neatly update specific properties of an object, are there any other differences? Any performance nuances between these 2 approaches dealing with stores?

import { createStore, produce } from "solid-js/store";
export function SolidComponent() {
    const [solidStore, setSolidStore] = createStore({ a: "aaa", b: "bbb" });
    function updateA() {
        console.log("A");
        setSolidStore((obj) => {
            return { a: obj.a + "A", b: obj.b };
        });
    }

    function updateB() {
        console.log("B");
        setSolidStore(produce((obj) => (obj.a += "B")));
    }

    return (
        <>
            Yoooo
            <p>
                from store - a: {solidStore.a} and b: {solidStore.b}
            </p>
            <button onClick={() => updateA()}>Press me A!</button>
            <button onClick={() => updateB()}>Press me B!</button>
        </>
    );
}

import { createStore, produce } from "solid-js/store";
export function SolidComponent() {
    const [solidStore, setSolidStore] = createStore({ a: "aaa", b: "bbb" });
    function updateA() {
        console.log("A");
        setSolidStore((obj) => {
            return { a: obj.a + "A", b: obj.b };
        });
    }

    function updateB() {
        console.log("B");
        setSolidStore(produce((obj) => (obj.a += "B")));
    }

    return (
        <>
            Yoooo
            <p>
                from store - a: {solidStore.a} and b: {solidStore.b}
            </p>
            <button onClick={() => updateA()}>Press me A!</button>
            <button onClick={() => updateB()}>Press me B!</button>
        </>
    );
}

P.S. sorry for bad naming, was just playing around.

1 Reply

bigmistqke•16mo ago

produce uses a proxy to map the mutations of the object to the underlying signals (similar to how immer does it), so presumably there is some overhead there. There are some minor differences in setting a property in produce in comparison to setting it without, see p.ex https://discord.com/channels/722131463138705510/1153225388370186330 I suppose the proxy u get from produce is (a lot like) createMutable, but that's just me assuming.

Gaming

Programming

What are the differences? Produce vs regular setStore