Component
TextArea Component
Most auto-growing textareas measure the content with JavaScript, then write the result back to el.style.height on every keystroke. It works, but the caret can jump a pixel and the textarea owns a measurement it shouldn't need to own. Flip on X-ray to see the version that leans on CSS Grid instead — a hidden replica does the measuring, the grid cell does the sizing, and the textarea just fills whatever space it's given.
Before
After
JS-driven sizing (before)react-textarea-autosize writes pixel heights straight to the textarea on every keystroke. Wrap a spring around that and the textarea snaps ahead of the wrapper — press Enter and the caret clips out of view, then jumps back in once the wrapper catches up.
Grid-driven sizing (after)The replica div sits in the same grid cell as the textarea. The cell takes the taller of the two, so the textarea stretches to fit without any JavaScript measurement — the browser does the work.
Spring on the wrapperBecause nothing ever sets a height on the textarea, the only thing that animates is the wrapper. A stiff spring catches up to the content — purely cosmetic, since the text is already at the right size.