SolidJs (overall) (general)

SOLID JS

Eric Rating: 5/5 Stars

done by Ryan Carniato in 2018.  This is a competitor to ReactJs, and in my option is better.

overall it is fast
function components that return JSX
uses compiled JS instead of React's Virtual DOM like Svelt
Compiles to vanilla JS
only weighes 7k (Vue 20k, React 40k, Angular 110k)

only calls function component once
so it is truly reactive

best comparision vs. other frameworks is: https://www.solidjs.com/guides/comparison

Solid does NOT support IE

Solid focuses on the data flow by deliberately embracing CQRS and immutable interface

React uses Virtual DOM.  SolidJs does not.
React.Children and React.cloneElement have no equivalent in Solid.
React and SolidJS use component-driven architecture and reactive programming paradigms

Solid uses its fine-grained Reactive Graph to only update what has changed and
  only shares this info for its initial render.

SolidJS does use JSX like React, but it is not mandatory. Also SolidJS has a “template syntax” alternative to JSX.

SolidJS uses a TypeScript-based compiler that analyzes the code at compile time and generates optimized JavaScript code that removes unnecessary code and improves performance.

SolidJS is a runtime framework, which means that its code is executed at runtime by the JavaScript engine in the browser or on the server (e.g., using Node.js).

==============================================

Shows real DOM:
function Counter() {
  const MyDiv = <div>Hi Mom!</div>
  console.log(MyDiv);
}

To add reactive state:
function Counter() {
  const [count, setCount] = createSignal(10);
  return <p>{ count() }</p>
}


To add derived signal for the reactive state:
function Counter() {
  const [count, setCount] = createSignal(10);
  const squared = () => count() ** 2
  return <p>{ count() }</p>
}

For Memoization (caching):
function Counter() {
  const [count, setCount] = createSignal(10);
  const squared = createMemo(() => count() ** 2);
  return <p>{ count() }</p>
}

For side effects (run code when your data changes) with auto subscription with no dependency array needed:
function Counter() {
  const [count, setCount] = createSignal(10);
  createEffect(() => { console.log( 'hello ${count()"' ) };
  return <p>{ count() }</p>
}


Has built-in functions for OnMount and OnCleanup:
function Counter() {
  const [count, setCount] = createSignal(10);
  createEffect(() => { console.log( 'hello ${count()"' ) };
  onMount();
  onCleanup();  
  return <p>{ count() }</p>
}

Improves JSX by having Show When command:
function Counter() {

  return (
    <>
       <Show when={ count() > 0 }>
         <p>Your counter is working...<p>
       </Show>
    </>
  )
}

Improves JSX by having For Each command:
function Counter() {

  return (
    <>
       <For each={ list } fallback={<div>Loading...<div>}>
         { (item) => <div>{item}</div> }
       </For>
    </>
  )
}

Has createStore function to handle nested reactivity:
const [list, setList] = createStore(['icon 1', 'icon 2', 'icon 3']);
  return (
    <>
       <For each={ list } fallback={<div>Loading...<div>}>
         { (item) => <div>{item}</div> }
       </For>
    </>
  )


Handles custom reactive with use keyword:
function logger(element, valueAccesor) {
   console.log(element)
}

return (
  <>
    <button use:doSomethingCool>
      Special Button
    </button>
  </>
 )

Has lazy-loading, SSR, etc.

=====================================

React manages state by:
  const [count, setCount] = useState(0);

  1) Changes the new Virtual DOM snapshot.
  2) Compare against the old Virtual DOM snapshot.
  3) If diff, then updates the Actual DOM.

SolidJS calls
   const [count, setCount] = createSignal(0);

   1) Only executes once
   2) JSX compiled and translated to the real DOM and
        Memorizes the reactive spots in the real DOM
   3) reaches out to the real DOM to that memorized place to update it.

SolidJS advantages:
   1) Performance better
   2) Easier mental model/less pitfalls  
          (so you can have timer in them OR
             set interval OR
             send HTTP request and then update state)

SolidJS differences:
   1) You must execute your state values as functions in the JSX code
   2) if you pass them through props, then cannot use props destruction but rather props.property
   3) Component functions only done once:  const doubleCount = () => count() * 2; // computed value   then you need to do in JSX code as well.
          <p>{doubleCount()}</p>
   4) has createMemo() for caching such as:  const doubleCount = createMemo(() => count() * 2);
   5) if needs to change then use createEffect(() => { // re-executes whenever count updates
             console.log('Effect - execute because counter updated', count());

What React better?
   1) React is way bigger.
   2) backed by Meta

=====================================

   SolidStart

   full-stack applications

=====================================

 SolidJS concepts

    Fragments, allow grouping a list of elements together without introducing an additional parent element. This can be useful when you don’t want to add an extra wrapper element to your component tree.
    Portals, provide a way to render a child component at a different position in the DOM hierarchy than its parent component. This can be useful when you need to render a component outside of its parent component for styling or z-index reasons.
    Context, which allows you to pass data down the component tree without the need to pass props through intermediate components. This can be useful when you have a large component tree with many nested components that all need access to the same data.
    Suspense is a technique for deferring the rendering of a component until its data has been fetched or loaded. This can help improve the perceived performance of an application by showing a loading indicator while the data is being fetched.
    Error boundaries allow you to gracefully handle errors that occur within a component. This can help prevent the entire application from crashing due to an error in a single component.
    Lazy components allow you to defer the loading of a component until it is actually needed. This can help improve the initial loading time of an application by loading only the components that are immediately necessary.
    Async and concurrent rendering, allow components to be rendered in parallel, which can improve the overall performance of an application. This can be particularly useful for large or complex components that take a long time to render.
    Implicit delegation allows you to define a set of properties or methods on a parent component that can be automatically delegated to child components. This can help reduce boilerplate code and make components more modular.
    Server-side rendering (SSR) and hydration allow you to render a SolidJS application on the server and then rehydrate it on the client. This can improve the initial loading time of an application and improve SEO.
    Directives, which provide a way to attach behaviors to HTML elements without the need for custom components. This can be useful for adding dynamic behavior to existing HTML elements.
    Streaming allows the server to send data to the client as soon as it is available, without waiting for the entire response to be generated. This can help improve the perceived performance of an application by reducing the initial loading time.