lose ref value after rerendering page

[k-hoang]

https://codesandbox.io/s/recursing-mendeleev-mcbb3
Before re-rendering, click focus button. It should work. It will focus the textarea.

However, if you click the re-render button, this will cause state to update and the app to rerender and after this, if you click the focus button, it will not focus because the ref is null.

[bkremenovic]

https://codesandbox.io/s/recursing-mendeleev-mcbb3
Before re-rendering, click focus button. It should work. It will focus the textarea.

However, if you click the re-render button, this will cause state to update and the app to rerender and after this, if you click the focus button, it will not focus because the ref is null.

I have the same problem. InnerRef just doesn't work

[bkremenovic]

https://codesandbox.io/s/recursing-mendeleev-mcbb3
Before re-rendering, click focus button. It should work. It will focus the textarea.

However, if you click the re-render button, this will cause state to update and the app to rerender and after this, if you click the focus button, it will not focus because the ref is null.

Solved ! :) Use it like this:

constructor(props) {
    super(props);
    this.textarea = React.createRef();
}

render() {
    return (
        <TextareaAutosize rows={1} maxRows={6} ref={this.textarea} />
    );
}

Then, the element can always be accessed using this.textarea.current

[k-hoang]

Here is a useRef solution.
https://codesandbox.io/s/loving-stonebraker-k5fyh-useref-solution-k5fyh