JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="textarea1" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment1..."></textarea>

<textarea id="textarea2" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment2..."></textarea>

<textarea id="textarea3" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment3..."></textarea>

<textarea id="textarea4" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment4..."></textarea>

JavaScript

document.addEventListener('input', function(event) {
    var limit = 200;
    if(event.target.getAttribute("class") == "form-control page-textarea") {
      var target = event.target;
      target.style.height = "";
     target.style.height = Math.min(target.scrollHeight, limit) + "px";

     if(target.style.height == "92px"){
       target.style.overflow = "hidden";
     } else if(target.style.height < limit  + "px"){
       target.style.overflow = "hidden";
     } else {
       target.style.overflow = "auto";
     }   
    }
}, false);