How does conditional rendering work?

[bughit]

<div>
  {showHeader && <Header />} 
  <Content />
</div>

This example is from react docs. If showHeader is a reactive value (would be a function in solid) and it changes, solid knows it needs to do something. React would re-render the whole component and then do vdom diffing/reconciliation. But solid does not re-render, it's supposed to do fine-grained updates, which would mean what here?

[luisherranz]

If I'm not mistaken, each JSX curly bracket expression is a computation. You can think about it as a small function that is going to be re-evaluated each time a reactive value (that was accessed inside it) changes.

const Comp = () => {
  const [showHeader, setShowHeader] = createSignal(false);

  return (
    <div>
      {showHeader() && <Header />}
      <Content />
    </div>
  );
};

Comp is never re-evaluated (re-rendered), but whatever is in the curly brackets is:

{showHeader() && <Header />}

After re-evaluating, Solid will make the required DOM manipulations to reflect the new DOM state.

Note the use of showHeader() instead of showHeader. By executing the signal, you not only get the current value, but also subscribe internally to any future change.

Each curly bracket expression is re-evaluated independently.

const Comp = () => {
  const [showHeader, setShowHeader] = createSignal(false);
  const [showFooter, setShowFooter] = createSignal(false);

  return (
    <div>
      {showHeader() && <Header />}
      <Content />
      {showFooter() && <Footer />}
    </div>
  );
};

In this case, if you change showFooter using setShowFooter, only the second curly bracket expression will be re-evaluated. In React, the whole component would be rerendered.

Solid doesn't need a vDOM diff because it knows exactly what parts of the DOM need to be modified thanks to the fine-grained reactivity system.

[bughit]

it knows exactly what parts of the DOM need to be modified thanks to the fine-grained reactivity system

That's too high-level, I am trying to understand how this works. It evaluates the expression {showHeader() && <Header />} to false and then?

The expressions can produce a list of nodes (text nodes, elements) or just one node? So solid has a map between each expression and the the nodes it created? Then when reevaluating it has to remove all the nodes it created the last run and insert new ones from the current run, if any. Something like that. Is this described in detail somewhere?

[luisherranz]

Then I think you should study how the Babel Plugin JSX DOM Expressions package works.

[ryansolid]

@luisherranz is correct. Although conditionals have some additional logic. The way I handle this specific case in Solid is memoized guards.

Your example compiles down to basically:

const _el$ = _tmpl$.cloneNode(true);

const _c$ = createMemo(() => !!showHeader());
insert(_el$, () => _c$() && createComponent(Header, {}), null);
insert(_el$, createComponent(Content, {}), null);

return _el$;

By hoisting the condition the insert doesn't re-run again unless the boolean condition changes. So we never recreate release/recreate Header unless showHeader actually changes from true to false or vice versa. That effect doesn't rerun.

In this scenario you can picture insert like:

function insert(el, accessor, nextSibling) {
  createEffect(() => el.insertBefore(accessor(), nextSibling);
}

Although there is a lot more logic in there.

Does that make sense?

[bughit]

insert(_el$, () => _c$() && createComponent(Header, {}), null);
function insert(el, accessor, nextSibling) {
  createEffect(() => el.insertBefore(accessor(), nextSibling);
}

What about the removal of the previous incarnation of the component?

Every time createComponent is executed in an effect, will it run the component factory function?

[ryansolid]

Yes. insert handles removal as well. As I said there is a lot more code in there. (https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/client.js#L143)

createComponent is:

function createComponent(Comp, props) {
  return untrack(() => Comp(props))
}

There is nothing special about which is why I tell people to picture that Components in Solid are just function calls. They more or less are. If you see a createComponent in the compiled output pretend it's just calling the function directly.