Destructuring functional props remove reactivity ?

Non working example (direct destructuring) :

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  {...filterableOptionsProps()}
/>

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  {...filterableOptionsProps()}
/>

(filterableOptionsProps is a signal) I was wondering if there is a better way than this to keep reactivity :

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  options={(inputValue) => filterableOptionsProps()?.options?.(inputValue)}
  optionToValue={(option) => filterableOptionsProps()?.optionToValue?.(option)}
  isOptionDisabled={(option) => filterableOptionsProps()?.isOptionDisabled?.(option)}
  format={(item, type) => filterableOptionsProps()?.format?.(item, type)}
/>

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  options={(inputValue) => filterableOptionsProps()?.options?.(inputValue)}
  optionToValue={(option) => filterableOptionsProps()?.optionToValue?.(option)}
  isOptionDisabled={(option) => filterableOptionsProps()?.isOptionDisabled?.(option)}
  format={(item, type) => filterableOptionsProps()?.format?.(item, type)}
/>

Is Split props the way to go ? I could not get it work since my props are inside a signal i think ... Any hint for a better solution is welcome ! Have a nice day !

10 Replies

foolswisdom•2mo ago

Spreading props in jsx as fine. The problem is only when destructuring when accepting props to a function splitProps (and mergeProps) is a solution to that latter case The reason for the difference is that the compiler changes the semantics of the spread in jsx. Similar to how props in general are transformed into objects getters

lucas•2mo ago

If i understood correctly destructuring props coming from a function need splitProps ? (i am having issue with my English as i cant really understand The problem is only when destructuring when accepting props to a function) edit: Ah i might just understood : The issue is destructuring idividual prop form a spread syntaxe when those props are function ? I my case the function is a signal so i cant properly use splitProps as it wont react to the signal changes ? I would need to use createSignal or CreateMemo but the extracted value form calling splitProps would also be stored in a signal so we are back to the starting point ? I must be doing something wrong ...

foolswisdom•2mo ago

In your example above, the correct way to do it is as shown in your first code snippet. No changes are necessary

lucas•2mo ago

Ok thanks i taught they was a more elegant way edit : the first synipet doesn't work

foolswisdom•2mo ago

In case it wasn't clear from what I wrote, this is expected to work

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  {...filterableOptionsProps()}
/>

<Select
  placeholder="Select a running app"
  onChange={setSelectedAppProcess}
  loading={openedAppsOptions().length === 0}
  {...props}
  {...filterableOptionsProps()}
/>

I'm not sure what could be more elegant

lucas•2mo ago

Unfortunatly this snippet doesn't work for me

foolswisdom•2mo ago

If it isn't working it isn't because of the code shown. Something is wrong somewhere else If you are destructuring in the definition of Select, that could be a problem, for example, but that code isn't shown Which is to say, this would be a problem:

function Select({placeholder, onChange, loading, ...props}) {}

function Select({placeholder, onChange, loading, ...props}) {}

Do this instead

function Select(props) {}

function Select(props) {}

lucas•2mo ago

fileterableOptionsProps is a signal containing various props (functions) i tested those function individualy using a another createEffect but those function have a scope that will be initialised latter (when the signalfileterableOptionsProps is updated). and the Select only retrive the initial function scope no the updated one Select is a library but i could create my own and see if this is the issue thanks for the hints !

foolswisdom•2mo ago

In that case, if the select component access those functions at the top level, that would cause the problem

lucas•2mo ago

Using a createMemo instead of a signal + createEffect for fileterableOptionsProps fixed my issue 🤷‍♂️ The destructuring work as itended now.

Gaming

Programming

Destructuring functional props remove reactivity ?