What is the different between $HasTextChildren and $HasVNodeChildren plus createTextVNode()?

Question

In Inferno, when trying to define children shape in compile time, there are two ways for defining the children 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?

Answer 1

When it comes to the end result, there is no difference. However, performance-wise, the former is a bit faster. But the limitation is that the children must be text only. There might be cases when you want to have text and other stuff as children. In that case, you can use createTextVNode() and one the appropriate flags, one of them being $HasVNodeChildren. You can see a list of flags in the docs: https://www.infernojs.org/docs/guides/optimizations

As an additional note, you don't have to define children shape yourself if the compiler can see it at compile time. So instead of this:

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

You can simply write:

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