Issue with reactivity when using mergeProps
https://playground.solidjs.com/anonymous/61802a1d-b0c8-44d9-9675-e6e73cdf36d3
In this demo, I do not understand why the last log says:
[Select] props.selectedOption {id: '2', name: 'bar'}I expected
undefined and if I remove the mergeProps call, the selected option will be undefined as expected.
(note that the code itself doesn't make much sense but I removed as much code as possible from the real app)14 Replies
1. components only run once
2. accessing the value eagerly
{ selectedOption: props_.selectedOption } effectively make it static
solution
1. getter mergeProps({ get selectedOption() { return props_.selectedOption }, ...)
2. accessor mergePrps(() => ({ selectedOption: props_.selectedOption }), ...)@mdynnl if static, why did the effect ran twice in Select? You may see the 2 logs in the Select, logging the value of
props.selectedOption output the same value. Why did the effect ran the second time if the value didn't change?3. accessing via merged props will fallback if the value if
undefined
that combined with 2.
also the reason it's reactiveit's not intuitive I think
@mdynnl when you say eagerly, I think you mean accessing early before something happens. What is it in this case?
by
this, do you mean the play tito posted?@Tito thank you, that is the
accessor () => ({ ... }) solution of @mdynnl ?
no I typed this before seeing Tito replynah, i should've been clear
let me update the old reply
the props merged(through
mergeProps) in Select will never fallback in this exampleso merging also adds a behaviour, so the "api" kinda changes. this is what I noted that it makes code less intuitive as I have to know, was this merged or not
the
merge isn't really a merge, it's a fallback
falling back to the left from the right in the params of mergePropsI thought it would fallback only one time. but we can see that there is reactivity, and it's like a reactive fallback, where whenever the option is undefined, it will fall back (i.e. it's not ran only once, but it's reactive)
well,
props stay the same( just wrapped up with a proxy or merged into getters)
i also don't get the intention here, mergeProps({ foo: props.foo }, props)
mergeProps is basically saying if some prop on the right is undefined, use the one on the left adjacentbut how when that reactive variable changes from a value to undefined, that code that does the fallback is ran again?
So the
mergeProps is not only ran once on mount, this code is ran subsequently somehowit's the same behavior as
props is without mergeProps
https://playground.solidjs.com/anonymous/52e51cda-aded-4666-9ed9-f28206653fa1
hence the confusion
yeah, more like it@Tito there is reactivity because of
selectedEntityId signal. I could make a dervied signal and pass it but that would be the same
if I add a createEffect in the children, and I change selectedEntityId from the parent, the createEffect will run, because the props (selectedOption) is reactive
(btw this becomes unrelated to the original question about mergePops and thank you so much both<3)
Im not sure what you mean @Tito but check this:
https://playground.solidjs.com/anonymous/6bb74459-6746-4ed5-9bae-c322d862386b
I didn't do any kind of wrapping here
@Tito btw why when I log console.dir(props.selectedOption) I cant see any getter or anything special, looks like a plain object literal
ah cause again, the getter got ran, ahmmm