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>