native.js

const div = document.createElement('div')
const input = document.createElement('input')

input.setAttribute('type', 'text')

input.addEventListener('change', (e) => {
  if (text === '') {
    return updateDiv({ text, className: 'hidden'})
  }
  
  updateDiv(text, className: 'my-class')
});

const updateDiv = ({ text, className }) => {
  div.innerText = text
  
  if (className !== div.getAttribute('class')) {
    div.setAttribute('class', className)
  }
}

document.body.appendElement(div)
document.body.appendElement(input)

updateDiv({ text: 'I\'m some text', className: 'my-class' })

preact.jsx

import { render, useSignal } from 'preact'

const Component = () => {
  const text = useSignal('I\'m some text')
  
  return (
    <>
      <div className={text.value ? 'my-class' : 'hidden'}>
        {text.value}
      </div>
      <input onChange={(e) => text.value = e.target.value} type="text" />
    </>
  )
}

render(<Component />, document.body)