How to get textarea value with ref? (Performance optimization)

[philipyoungg]

I want to switch to uncontrolled component to optimize performance. Currently adding input with controlled component is super slow.

I've tried using ref and innerRef to get this.textarea.value. It doesn't work.

[gabro]

Hi @philipyoungg, what do you mean by

Currently adding input with controlled component is super slow.

How slow? Do you see a perceptible lag during the input?

Also

It doesn't work.

What have you tried, what doesn't work? Can you show a self-contained example that we can use to reproduce the behavior you're seeing?

[philipyoungg]

Hello @gabro, that's for the speedy follow up! Yes, I experienced perceptible lag during input.

I have tried using ref={node => this.textarea = node} and innerRef={node => this.textarea = node}
and accessing it with this.textarea.value. It shows undefined.

Case: I'm making a to do app with multiple list.

[lists of item]
[controlled textarea input]

On a page with only several todo list, there's no lag whatsoever.
It's become wonky on page with hundreds of lists.

That's why I'm going to uncontrolled route to improve performance.

[FrancescoCioria]

Hi @philipyoungg and sorry for the delay,

I'm pretty sure your performance issues are caused by useless re-renders that could be avoided, which would explain why you notice that only with a lot of items.

I'll explain myself better: whenever you type I assume you are causing somehow each item of the list to re-render, which is very expensive.

I suggest you to use React.PureComponent as the default for you components and/or adding a custom shouldComponentUpdate in your item like this:

let's suppose you have an item with two props: value and onChange. We should re-render only if the value has changed to avoid wasting React's time.

shouldComponentUpdate(nextProps) {
  return nextProps.value !== this.props.value;
}

You can read more about this here: https://facebook.github.io/react/docs/optimizing-performance.html#shouldcomponentupdate-in-action

Let me know if this helps you :)

PS: AutosizeTextarea should probably extend PureComponent instead of Component, I'll open a separate issue for that

EDIT: see comment in #64 for a simple implementation that wraps the component with a PureComponent that automatically adds a tested and official shouldComponentUpdate as described here: https://facebook.github.io/react/docs/react-api.html#react.purecomponent

[FrancescoCioria]

I'm closing this for now, if anyone still has perf problems feel free to comment here :)