Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput onChange is creating a new callback function on every render, thus making it slow #32

Open
TejaswitaS opened this issue Sep 8, 2017 · 0 comments

Comments

@TejaswitaS
Copy link

In react, Ideally we should not have arrow functions declarations in onChange callbacks. Instead, we should pass a reference of an already declared function. Otherwise we will end up creating a new function each time render is called and app will be slow.
Take a look at this code on line no: 109

<TextInput {...this.props}
                ref='input'
                underlineColorAndroid="transparent"
                style={[styles.valueText]}
                defaultValue={this.props.defaultValue}
                value={this.state.text}
                maxLength={this.props.maxLength}
                onFocus={() => this.setFocus()}
                onBlur={() => this.unsetFocus()}
                onChangeText={(value) => this.setText(value)}
/>

onChange should be written like this:

onChange={this.onInputChange}

and then we declare the onChange function only once in the component

onInputChange = value => this.setState({ value });

I will raise a PR, let me know :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant