How to get textarea value with ref? (Performance optimization) about react-autosize-textarea HOT 4 CLOSED

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?

from react-autosize-textarea.

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.

from react-autosize-textarea.

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

from react-autosize-textarea.

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

from react-autosize-textarea.