Regression: textarea ‘jumps’ after initial load

I just upgraded from 0.4.9 to 3.0.2 and noticed a change in behavior. Now, when the page loads, the textarea will noticeably ‘jump’ to the correct height, pushing everything below it down the page. Before, the textarea was the correct height on initial load, so there was no jump.

Here’s a gif with the CPU throttled in dev tools to try and emphasize the issue for the purpose of recording. The first tab is the latest version (3.0.2) and the second tab is the old version. If you download the gif and look at frame 70, you can see the moment where the title is loaded at the wrong height before jumping to the correct height in the next frame.

Here’s the relevant code (simplified to reproduction case):

import * as React from "react";
import TextareaAutosize from "react-autosize-textarea";
import { style } from "typestyle";

interface Props {
  defaultValue?: string;
}

export class NoteTitle extends React.Component<Props> {
  public render() {
    return <TextareaAutosize className={className} defaultValue={this.props.defaultValue} />;
  }
}

const className = style({
  border: 0,
  fontSize: "40px",
  fontWeight: 600,
  lineHeight: "48px",
  margin: 0,
  overflow: "hidden",
  outline: 0,
  resize: "none",
  width: "100%"
});

[FrancescoCioria]

I published the fixed in the new major 4.0.0 (as this fix is breaking for people using StyledComponents)

[renchap]

I sent a PR fixing this: #103