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

0.44.0 TextInput with child CPU goes to 100% after 300 chars #13908

Closed
balasan opened this issue May 11, 2017 · 11 comments
Closed

0.44.0 TextInput with child CPU goes to 100% after 300 chars #13908

balasan opened this issue May 11, 2017 · 11 comments
Assignees
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@balasan
Copy link

balasan commented May 11, 2017

Description

When typing inside a multiline textInput, after around 300 - 400 characters, CPU shoots up to 100%. Once you stop typing, CPU goes back down. Typing a few more characters causes the CPU to shoot up to 100% again.

This happens in simulator and device and sometimes leads to a crash.
This does not happen where there is no child and the value prop is used.

Reproduction Steps and Sample Code

Sample code follows, using Sample React Native App using nothing but TextInput. Remember, you need to have around 300 - 400 characters in the input to start seeing the problem.

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

export default class textInput extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      text: ''
    };
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TextInput
          style={{flex: 1, marginTop: 100 }}
          multiline
          onChangeText={(text) => this.setState({ text })}
        >
          <Text>{this.state.text}</Text>
        </TextInput>
      </View>
    );
  }
}

AppRegistry.registerComponent('textInput', () => textInput);

Solution

?

Additional Information

  • React Native version: 0.44.0
  • Platform: iOS
  • Development Operating System: macOS
  • Dev tools: Xcode
@balasan balasan changed the title 0.44.0 TextInput with child CPU goes to 100% 300 chars 0.44.0 TextInput with child CPU goes to 100% after 300 chars May 11, 2017
@itaibs
Copy link

itaibs commented May 11, 2017

Seems related:
#13928

@balasan
Copy link
Author

balasan commented Jun 19, 2017

Still seeing this issue in 0.45.1
Works as expected in v 0.43.0

@shergin - any chance you could take a look?

paste the following text into the textInput to replicate, after this typing more text sends CPU over 100%

Lorem ipsum dolor sit amet, rebum definitiones quo et, laoreet recusabo gloriatur eos eu. Detracto menandri mandamus eu nec, id solet euripidis mel. Viderer atomorum vis et. In his ornatus iudicabit contentiones, erat nihil principes ei eam. Eum graece similique an. Aliquam definiebas vis ei, per tota adipiscing cu.

Sonet labore laoreet at eos. No vel partem impetus convenire. Ad erant discere perpetua eam. Detraxit convenire id ius, esse facer consequuntur nam ne.

Et sed veritus expetenda. Vidisse postulant has ut, nibh erroribus scribentur pro cu. Augue intellegebat ei sit. At pro appareat adipisci mediocrem, ex per possit sensibus, ad veri audire nominati mei. At euismod eloquentiam pro, ut eum omittam blandit intellegam, et nulla dicam dissentiet ius. Et viris ornatus vivendum cum, atomorum molestiae argumentum ei vel.

Omnes homero soleat id sea, at quo sanctus accommodare. Eos quis noluisse ne, ius eu error feugiat pericula, pro ad enim partem mediocrem. Albucius consectetuer ne eum. Has pertinacia mnesarchum te, ei duo prima minim nobis, populo neglegentur per ad. Duo an gloriatur disputationi, denique legendos assueverit ut his.

Libris democritum quo an, consul vocent ad cum. Has doming tamquam praesent ea. Eam platonem ullamcorper at, eum solet definiebas no, has cu possit forensibus reprimique. Adhuc similique persecuti et vix.

@shergin
Copy link
Contributor

shergin commented Jun 24, 2017

@balasan That you for the heads up!
It's a bummer. :( I will investigate it asap.

@pietropizzi
Copy link

pietropizzi commented Jun 30, 2017

Just wanted to create the same issue. I created a snack for it and some gifs to illustrate, I'll drop them in here.

https://snack.expo.io/ryain5X4-

In the gifs I reload an app View with a lot of text twice.

Passing as value

asvalue

Passing as Text child

aschildren

@shergin shergin self-assigned this Jun 30, 2017
@balasan
Copy link
Author

balasan commented Sep 6, 2017

@shergin I did some debugging & profiling and seems like the bottleneck happens RCTShadowText.m line 211:

  [textStorage addLayoutManager:layoutManager];

If I comment out that line text input works as expected with long text (although all other text becomes invisible)

Not sure why this happens or how to fix it yet... Most of that code seems to be the same as v0.43 which doesn't have any problems.

@huangmr
Copy link

huangmr commented Sep 6, 2017

seeing similar performance issue here on IOS, after pasting 2000+ characters into the text input, in debug mode it took over 2 minutes for the ui to respond, after a bit profiling, RCTUiManager seems to be the one to be blamed. I am on RN 0.47.2

screen shot 2017-09-05 at 14 24 56

screen shot 2017-09-05 at 14 29 47

@shergin
Copy link
Contributor

shergin commented Sep 6, 2017

Oh my, we actually should not layout nodes for at all.

@huangmr
Copy link

huangmr commented Sep 7, 2017

Hi @shergin, how likely will this be fixed? we kinda needed the nested text inside for mentions support. at the moment we have to limit the maxLength for the text input which is less than idea.

@shergin
Copy link
Contributor

shergin commented Sep 7, 2017

@huangmr It definitely will be fixed. The question is when. 😞
Most likely I will not have time to dive into this at least for couple of weeks, so if someone wants to fix this, please do. I will love to review and land the PR.

@maartenschumacher
Copy link
Contributor

fixed with 6b11259

@shergin
Copy link
Contributor

shergin commented Oct 31, 2017

@maartenschumacher Thank you for confirming! 🎉

@shergin shergin closed this as completed Oct 31, 2017
@facebook facebook locked as resolved and limited conversation to collaborators Oct 31, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 31, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

7 participants