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 stat

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>