JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <label id="label">Your name is: (Start typing...)</label>
  <input type="text" id="name" />
</div>

CSS

#app {
  min-height: 200px;
  padding: 20px 4px;
  margin: 10px 4px;
}

input {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #000;
  font-size: 1.2em;
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
}

JavaScript

const label = document.getElementById("label")
const input = document.getElementById("name")
const now = new Date() // 👈 This allocation happens only once.

console.log("Rendering") /// 👈 This is called only once.

label.innerText += ` (${now.toISOString()})` // 👈 This is called only once.

let text = ""
let name = ""

// 👇 Only this reactive handler is executed again.
input.addEventListener("keyup", (evt) => {
  name = evt.target.value

  console.log(name)

  if (name === "") {
    text = "Your name is (Start typing...)"
  } else {
    text = "Your name is: " + name
  }

  text += ` (${now.toISOString()})`

  label.innerText = text
})