React-native: TextInput has performance issue in ^0.55

[armenbadalyan]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.8.0
Yarn: 1.3.2
npm: 5.4.2
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.0.0 => 16.3.2
react-native: ^0.55.0 => 0.55.3

Steps to Reproduce

1. Create a new project with react-native init
2. Replace App.js content with the following code:

import React, { Component } from 'react';
import {    
    TextInput,    
    View
} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
    state = {
        text: ''
    }

    onChangeText = (event) => {
        const { text } = event.nativeEvent
        this.setState({ text })
    }

    render() {
        return (<View>
            <TextInput value={this.state.text} onChange={this.onChangeText} />
        </View>);
    }
}

1. Run the app on Android device with react-native run-android
2. Type and clear some text into the TextInput several times

Expected Behavior

Input should perform the same after several type/clear cycles.

Actual Behavior

Input becomes laggy after a couple of type/clear cycles.

[ilonashub]

Having the same issue exactly... no need to clear the text even - if I type 3-4 lines it starts to become very laggy.

[wuyunqiang]

may be you can try like that:

class Input extends Component{
    constructor(){
        super();
        this.amount=0;
    }
    componentWillReceiveProps(nextProps) {
        if(this.props.amount!=nextProps.amount){
            this._textInput&&this._textInput.setNativeProps({text: nextProps.amount});//重点
        }
    }
    setAmout = (text)=>{
        this.amount = text;
    };

    getAmout = ()=>{
        this.props.getAmout&&this.props.getAmout(this.amount);
    };

    render(){
        return (<View style={styles.inputStyle}>
          <TextInput
                    ref={component => this._textInput = component}
                    numberOfLines={1}
                    underlineColorAndroid={'transparent'}
                    style={{padding:0,backgroundColor:'white',width:SCALE(400)}}
                    maxLength={10}
                    keyboardType = {'numeric'}
                    onChangeText={this.setAmout}
                    onEndEditing={this.getAmout}
                />
        </View>)
    }
}

   <Input
                    getAmout = {this.getAmount}
                    amount = {this.state.amount}/>

https://github.com/wuyunqiang/ReactNativeUtil/issues/50

[armenbadalyan]

@wuyunqiang Thanks for the suggestion. In my case I can't use uncontrolled TextInput (ref + setNativeProps) and I think the majority of developers are using the recommended way of setting text via value prop.

[Waltari10]

I think this is happening with defaultValue as well. If someone could confirm that would be great.

[Waltari10]

You can also set the initial textInput value like this, but this also seems to have the same performance issue:

<TextInput onChange={this.onChangeText}>{this.state.text}</TextInput>

[ilonashub]

@Waltari10 when I added the text as a child inside TextInput it made things much worst. Putting that as value attribute did better for me

[Waltari10]

@ilonashub Yep. I think setNativeProps is probably the best option at this point, just like in your example.

[shafy]

Have the same issue with setting the value props... Is this related to #18874?

[aspidvip]

https://github.com/facebook/react-native/issues/19464

[stueynet]

It would seem this is a pretty significant regression as it causes any react native app using text inputs to be laggy on android. What would be a good way to escalate this?

[shafy]

I don't know @stueynet but we should definitely bump this up somehow...

[aspidvip]

+

[shafy]

I'm looking through the 0.56 pre-release bug fixes (https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#056) and can't see this issue mentioned. Is this not an issue everyone has?

[stueynet]

Everyone who has a text field has this issue on Android. I am not sure the next steps other than Tweeting.

[davidpaulsson]

Any update on this issue? It's quite a severe regression :/ Fingers crossed it will get resolved quickly.

[shafy]

Do we know the root cause of this? I understand that the RN team is busy with other, also important things, but maybe we could work on something?

[fhadsheikh]

There's an open PR to revert the changes that caused this regression. https://github.com/facebook/react-native/pull/19645

[shafy]

I now manually added the patch from here: https://github.com/facebook/react-native/issues/19126 and it does fix the issue. Hopefully we can have it in the next release.

[kelset]

Hey folks, as @shafy there is a PR and I'll try to ensure it will get merged ASAP and added to 0.56 since it's pretty massive. That said, since this & #19126 are duplicate and that the author of the PR is moving the conv forward in the other issue I'll close this to reduce redundancy.