SolidJS•11mo ago

confused about primitives(useEffect,on,createComputed)

I‘m trying to create a primitive for synchronize the search params with signal. I tried different methods, all of them works as expected. I started to think of the apis and got confused. createEffect in this case run twice createEffect with on run once createComputed run twice 1. why some of them run twice？ 2. when to use on with effect? 3. tracking signal and do some updates， shoud I just use computed?

export function createSearchParameter(param: string): Signal<ParamsValue> {
    const [searchParams, setSearchParams] = useSearchParams();
    const [value, setValue] = createSignal<ParamsValue>(searchParams[param]);
    createEffect(
        on(value, (v) => {
            console.log("create effect on");
            setSearchParams({
                ...searchParams,
                [param]: v,
            });
        }),
    );
    createEffect(() => {
        console.log("create effect");

        setSearchParams({
            ...searchParams,
            [param]: value(),
        });
    });
    createComputed<Accessor<ParamsValue>>((v) => {
        console.log("createComputed");

        setSearchParams({
            ...searchParams,
            [param]: v(),
        });
        return v;
    }, value);
    return [value, setValue];
}

export function createSearchParameter(param: string): Signal<ParamsValue> {
    const [searchParams, setSearchParams] = useSearchParams();
    const [value, setValue] = createSignal<ParamsValue>(searchParams[param]);
    createEffect(
        on(value, (v) => {
            console.log("create effect on");
            setSearchParams({
                ...searchParams,
                [param]: v,
            });
        }),
    );
    createEffect(() => {
        console.log("create effect");

        setSearchParams({
            ...searchParams,
            [param]: value(),
        });
    });
    createComputed<Accessor<ParamsValue>>((v) => {
        console.log("createComputed");

        setSearchParams({
            ...searchParams,
            [param]: v(),
        });
        return v;
    }, value);
    return [value, setValue];
}

6 Replies

thetarnav•11mo ago

what’s useSearchParams?

colinshenOP•11mo ago

from solid router

thetarnav•11mo ago

why do you need another primitive to manage a single parameter? couldn’t you just use the search params one directly? I think it will, similarly to a store, hold signals for each search param, so you’re just repeating work that it does if you really need that api you could write it like this (If I understand how useSearchParams work) but you see how unnecessary that is

function createSearchParameter(param: string): Signal<ParamsValue> {
    const [searchParams, setSearchParams] = useSearchParams()

    return [
        () => searchParams[param],
        value => setSearchParams(param, value),
    ]    
}

function createSearchParameter(param: string): Signal<ParamsValue> {
    const [searchParams, setSearchParams] = useSearchParams()

    return [
        () => searchParams[param],
        value => setSearchParams(param, value),
    ]    
}

colinshenOP•11mo ago

Everytime the state chagnes, I need to update the search param. Also for shared link, I need the param to initialize the state. also, value => setSearchParams(param, value) is not type setter. useSearchParams is not reactive..

thetarnav•11mo ago

can't you just use the param as the state? the types for solid.Setter are a bit complicated, but this should work, you can just typecast it

colinshenOP•11mo ago

I see. I will try your solution.

Gaming

Programming

confused about primitives(useEffect,on,createComputed)