#confused about primitives(useEffect,on,createComputed)

1 messages · Page 1 of 1 (latest)

pulsar holly
#

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];
}
bronze monolith
#

what’s useSearchParams?

pulsar holly
bronze monolith
#

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),
    ]    
}
pulsar holly
#

Everytime the state chagnes, I need to update the search param. Also for shared link, I need the param to initialize the state.

pulsar holly
bronze monolith
bronze monolith