This might be heresy to many JS devs, but I think 'state' variables are an anti-pattern.

I use webcomponents and instead of adding state variables for 'flat' variable types I use the DOM element value/textContent/checked/etc as the only source of truth, adding setters and getters as required.

So instead of:

  /* State variables */
  let name;

  /* DOM update functions */
  function setNameNode(value) {
    nameNode.textContent = value;
  }

  /* State update functions */
  function setName(value) {
    if(name !== value) {
      name = value;
      setNameNode(value);
    }
  }

it would just be akin to:

  set name(name) { this.nameNode.textContent = name }
  get name() { return this.nameNode.textContent}

  /* or if the variable is used less than 3 times don't even add the set/get */ 
  setState({name}){
     this.querySelector('#name').textContent = name;
  }

Its hard to describe in a short comment, but a lot of things go right naturally with very few lines of code.

I've seen the history of this creating spaghetti, but now with WebComponents there is separation of objects + the adjacent HTML template, creating a granularity that its fusilli or macaroni.