This is absolutely true.

Virtual DOM diffs do a huge amount of unneeded work because in the vast majority of cases a renderer does not need to morph between two arbitrary DOM trees, it needs to update a DOM tree according to a predefined structure, and the developer has already described this structure in their template code!

A large portion of JSX expressions are static, and renderers should never waste the time to diff them. The dynamic portions are clearly denoted by expression delimiters, and any change detection should be limited to those dynamic locations.

This realization is one of the reasons for the design of lit-html. lit-html has an almost 1-to-1 correspondence with JSX, but by utilizing the static/dynamic split it doesn't have to do VDOM diffs. You still have UI = f(data), UI as value, and the full power of JavaScript, but no diff overhead and standard syntax that clearly separates static and dynamic parts.

The syntax is very close:

JSX:

   render(props) {
     return <>
       <h1>Hello {props.name}</h1>
       {props.items
          ? <ol>{props.items.map((item) => 
              <li>{item.label}</li>)}
            </ol>
          : <p>No Items</p>}
     </>;
   }

lit-html:

   render(props) {
     return html`
       <h1>Hello ${props.name}</h1>
       ${props.items
          ? html`<ol>${props.items.map((item) => 
              html`<li>${item.label}</li>`)}
            </ol>`
          : html`<p>No Items</p>`}
     `;
   }

I really think the future is not VDOM, but more efficient systems, and hopefully new proposals like Template Instantiation can advance and let the browser handle most of the DOM updates natively.

edit: closed JSX fragment as pointed out