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

var textareas = document.getElementsByClassName("form-control page-textarea");
var limit = 200;

for(var i=0, length= textareas.length; i < length; i++){
   var textarea = textareas[i];
    
   textarea.oninput = function() {
     this.style.height = "";
     this.style.height = Math.min(this.scrollHeight, limit) + "px";

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