React-native: 0.44.0 TextInput with child CPU goes to 100% after 300 chars

[balasan]

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

[itaibs]

Seems related:
https://github.com/facebook/react-native/issues/13928

[balasan]

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]

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

[pietropizzi]

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

Passing as Text child

[balasan]

@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]

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

[shergin]

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

[huangmr]

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]

@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]

fixed with https://github.com/facebook/react-native/commit/6b11259c46f3133ee48a21561fe0dab58cee6847

[shergin]

@maartenschumacher Thank you for confirming! 🎉