S
SolidJS•16mo ago
boy_koded

how solid.js handles props

Hello, I’m new to solid.js. My aim is to teach other developers too(after getting myself farmiliar) . I’m trying to understand how solid.js handles props and came up with this theory “ solid.js differentiates itself from other frameworks by using fine-grained reactivity to update only specific parts of a component affected by changing props, without the requirement for a virtual DOM. It is also built on reactivity which ensures real-time synchronization between data and user interface” I wanted to know if I’m correct on this. And also got some questions like - what is solid.js approach to type-checking - debugging prop issues - lifecycle of props I’d appreciate any help towards my learning journey.
4 Replies
bigmistqke
bigmistqke•16mo ago
i think the best introduction to solid and reactivity in general is: https://youtu.be/UhGV8yYnvQE?si=-O14FxLlnw7FxmXd&t=284 especially the part starting from 4:44 on
JavaScript Conferences by GitNation
YouTube
SolidJS: Reactivity Unchained – Ryan Carniato, JSNation 2022
JSNation Conference 2022 #JSNation #GitNation Website – https://jsnation.com/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/jsnation-2022 Talk: SolidJS: Reactivity Unchained Join Ryan Carniato, creator of SolidJS, as he shows off...
bigmistqke
bigmistqke•16mo ago
solid.js differentiates itself from other frameworks by using fine-grained reactivity to update only specific parts of a component affected by changing props, without the requirement for a virtual DOM. It is also built on reactivity which ensures real-time synchronization between data and user interface”
couple of notes: - it's any dom-element that is affected by any changing signal, not restricted to changing props. - important part with solid is that components dissolve: they are only set-up functions for the reactive graph. after the set-up all changes are executed through signals and effects. - rendering is literally a side-effect. jsx is compiled to templates and effects changing only the necessary parts. - other important part info is that has to be called inside the effect that needs to be re-executed. to pass on signals and reactivity with props, dynamic props are compiled to getters. for that reason you can not destructure props (outside of the effect that you want to be reactive). Instead of destructuring there is mergeProps and splitProps to help with props-management (and I use https://github.com/solidjs/solid/pull/1794 too for defaultProps) ye best to watch that video. imo it tells like 99% of the solid story, not including solid start. love that part from 10.50-11.50 from having only these reactive primitives to the full solid look in only a minute
boy_koded
boy_kodedOP•16mo ago
Thank you for this 🔥..
bigmistqke
bigmistqke•16mo ago
ur welcome! was one more thing i wanted to add - you mention lifecycles, but there isn't really a concept of lifecycles in solid because there isn't really a concept of components in solid. everything is just signals and effects. but signals do have a 'cleanup': a phase that happens everytime the effect re-runs, this also includes the moment the jsx that represents the component gets removed from the tree aka 'when the component unmounts'. so you can do 
const Component = () => { 
  ...
  onCleanup(() => { 
    console.log('this will be called whenever the component gets unmount')
 })

 createEffect(() => {
  ...
  onCleanup(() => {
    console.log('and this will change whenever this effect re-runs, so you can do some cleanup, comparable to reacts return-function')
  })
 }) 
 ...
}
const Component = () => { 
  ...
  onCleanup(() => { 
    console.log('this will be called whenever the component gets unmount')
 })

 createEffect(() => {
  ...
  onCleanup(() => {
    console.log('and this will change whenever this effect re-runs, so you can do some cleanup, comparable to reacts return-function')
  })
 }) 
 ...
}
there is an onMount-helper, but you can think of it as const onMount = (cb) => createEffect(() => untrack(cb)): so it's just an effect that only runs once. just like createEffect, it will run right after the dom-elements are created and added to the dom-tree. since components only run once you can also have logic in the component-body and don't have to worry about it running again.

Did you find this page helpful?