S
SolidJS•8mo ago
lucas

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
foolswisdom•8mo 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
lucasOP•8mo 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
foolswisdom•8mo ago
In your example above, the correct way to do it is as shown in your first code snippet. No changes are necessary
lucas
lucasOP•8mo ago
Ok thanks i taught they was a more elegant way edit : the first synipet doesn't work
foolswisdom
foolswisdom•8mo 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
lucasOP•8mo ago
Unfortunatly this snippet doesn't work for me
foolswisdom
foolswisdom•8mo 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
lucasOP•8mo 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
foolswisdom•8mo ago
In that case, if the select component access those functions at the top level, that would cause the problem
lucas
lucasOP•8mo ago
Using a createMemo instead of a signal + createEffect for fileterableOptionsProps fixed my issue 🤷‍♂️ The destructuring work as itended now.

Did you find this page helpful?