TextInput looses focus when wrapped in a HOC

[triplea24]

Environment

React Native Environment Info:

System:
  OS: macOS High Sierra 10.13.6
  CPU: x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
  Memory: 74.63 MB / 16.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 8.12.0 - /usr/local/bin/node
  Yarn: 1.12.1 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/bin/npm
SDKs:
  iOS SDK:
    Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
  Android SDK:
    Build Tools: 26.0.3, 27.0.3, 28.0.0, 28.0.3
    API Levels: 26, 27, 28
IDEs:
  Android Studio: 3.2 AI-181.5540.7.32.5056338
  Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
  react: 16.5.0 => 16.5.0 
  react-native: https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz => 0.57.1 
npmGlobalPackages:
  react-native-cli: 2.0.1

Description

I wrote a HOC contains the following code:

const withLabel = WrappedComponent => props => {
  const { label, error, errorMessage, style, children, ...otherProps } = props;
  return (
    <View>
      <Text>{label}</Text>
      <WrappedComponent {...otherProps} style={[style, { marginTop: 10 }]}>
        {children}
      </WrappedComponent>
      {error && (
        <Text style={{ marginLeft: 5, color: "red" }}>{errorMessage}</Text>
      )}
    </View>
  );
};

I used a TextInput component as a wrapped component and it seems when I'm passing the following prop as onChangeText it loses the focus everytime I enter a character.

export default class RegisterScreen extends React.Component {
  state = {
    name: ""
  };
  render() {
    const LabeledTextInput = withLabel(TextInput);
    return (
      <View style={styles.container}>
        <LabeledTextInput
          value={this.state.name}
          onChangeText={text => this.setState({ name: text })}
          label={"label"}
          error={true}
          errorMessage={"Error occured"}
        />
        <TextInput
          value={this.state.name}
          onChangeText={text => this.setState({ name: text })}
        />
      </View>
    );
  }
}

It worked well for the second TextInput, but for the one that I've used with HOC. It's different.

Reproducible Demo

Checkout the following snack:
https://snack.expo.io/@ahangari24/d3JhcH

[triplea24]

The problem solved by moving the const LabeledTextInput = withLabel(TextInput) to outside of render method.

const LabeledTextInput = withLabel(TextInput);
export default class RegisterScreen extends React.Component {
  state = {
    name: ""
  };
  render() {
    
    return (
      <View style={styles.container}>
        <LabeledTextInput
          value={this.state.name}
          onChangeText={text => this.setState({ name: text })}
          label={"label"}
          error={true}
          errorMessage={"Error occured"}
        />
        <TextInput
          value={this.state.name}
          onChangeText={text => this.setState({ name: text })}
        />
      </View>
    );
  }
}