Same as op, I rewrote away from react my Dropbox alternative (https://github.com/mickael-kerjean/filestash) in vanilla js a couple years back around the idea that components are plain exported functions like this:

  export default function component(render) {
      const $dom = xxxx
      render($dom);
  }

example: https://github.com/mickael-kerjean/filestash/blob/master/pub... the only library in there is rxjs to manipulate events in a functional fashion with no imperative code and everything is composed from those simple component functions. The wasm is used mostly as an interface for plugins to both run apps to display various file types like RAW, PSD, TIFF, CDR, .... as those tend to have better support in C than other languages, and on the server side to have a safe environment to execute plugin code.

Completely seriously, and I don’t think this is particularly controversial: outperforming React is not impressive. React was never particularly good at performance—VDOM is fundamentally overhead, and there are a variety of faster and lighter techniques employed by various competitors, and even among VDOM libraries it’s not as fast as it could be. React sold itself as fast initially, but what it was faster than (rebuilding the entire DOM on any update) was a strawman.

It’s not hard to be faster than React while exposing broadly similar functionality. If you’re making something for your own usage only, it’s even easier to beat it.

I use web components with a render function to generate HTML and templates to provide fine-grained reactivity. Targeted re-rendering of items with relevant state changes makes performance significantly faster and also makes forms easier to write.

Here is an example of a template used to render a list of events.

const EventItem = () => {

  EventItem.eventTime = (eventData) =>{
    if(eventData.isRecurring){
     return `${eventData.dayOfWeek}s at ${eventData.nextEventTime}`;
    }
    return `${eventData.nextEventDate} at ${eventData.nextEventTime}`
  }

  EventItem.url = (eventData) => {
    return `/html/groups/event.html?id=${eventData.eventId}&groupId=${eventData.groupId}`
  }

  EventItem.location = (eventData)=>{
    return  `${convertLocationDataForDisplay(eventData.eventLocation)}`
  }
    
  return `
    <li>
      <a 
        class="btn secondary"
        {{href=url}}
        {{eventName}}
       >
       </a>
       <div 
         class="event-time" 
         {{eventTime}}
       >
       </div>
       <div
         class="event-location"
         {{location}} 
       >
       </div> 
      </li>
   `;
 }

 BaseDynamicComponent.defineTemplate(EventItem,"EventItem");

This is how the template is used in a component.

  <ul
    data-array=data
    data-template-name=EventItem  
  ></ul>