Ever understand the difference between gender and your sexual orientation?

Question

In Inferno, when trying to define a child element shape at compile time, there are two ways to define the child element as text:

function Hello() {
  let h = "Hello";
  return (
    <p $HasTextChildren>
      {h}
    </p>
  );
}

import { createTextVNode } from "inferno";

function Hello() {
  let h = "Hello";
  return (
    <p $HasVNodeChildren>
      {createTextVNode(h)}
    </p>
  );
}

What is the difference between these two methods?

Answer 1

As far as the final result is concerned, there is no difference. Performance-wise, however, the former is slightly faster. But the restriction is that child elements must be text only. There may be situations where you want the text and other content as child elements. In this case you can use createTextVNode() with one of the appropriate flags, one of which is $HasVNodeChildren. You can see the list of flags in the documentation: https://www.infernojs.org/docs/guides/optimizations

As an additional note, you don't have to define the shape of the child elements yourself if the compiler can see it at compile time. Therefore, there is no need to write like this:

function Hello() {
  return <p $HasTextChildren>Hello</p>;
}

You can simply write:

function Hello() {
  return <p>Hello</p>;
}