Learning Notes: SolidJS

  • The function returning a component is executed only once, and updates to the function are handled differently from how React handles them. This has consequences.
  • Solid uses proxies to hook into props objects to know when a prop is accessed. Destructuring a prop - like you would in React - undoes this ability that Solid provides.
  • The iterable render component infers which objects in an array need to be updated, obviating the need for keys like React does.
  • The conditional render component offers a fallback which is invoked on the when clause evaluating to false.
  • Solid primitives:
    • Signal
      • A representation of state
      • createSignal - equivalent to React's useState hook - first item in returned array is an accessor function, instead of a direct value. This is necessitated by the component function being executed only once.
      • Derived signal - depends on other signals - lets us make a distinction between 'state' and 'derived state'.
      • Resource - a signal that can handle asynchronous loading
    • Effect
      • A reaction to a signal change
      • createEffect - equivalent to React's useEffect hook, but a dependency array is not necessary. Solid tracks the signals specified in a effect definition automatically (how?).
      • rendering a component is treated like an effect!