perf: fix (comment) input performance

src/components/Composer/index.js

@@ -60,12 +60,6 @@ const propTypes = {
     /** Update selection position on change */
     onSelectionChange: PropTypes.func,
 
-    /** Selection Object */
-    selection: PropTypes.shape({
-        start: PropTypes.number,
-        end: PropTypes.number,
-    }),
-
     /** Whether the full composer can be opened */
     isFullComposerAvailable: PropTypes.bool,
 
@@ -91,10 +85,6 @@ const defaultProps = {
     autoFocus: false,
     forwardedRef: null,
     onSelectionChange: () => {},
-    selection: {
-        start: 0,
-        end: 0,
-    },
     isFullComposerAvailable: false,
     setIsFullComposerAvailable: () => {},
 };
@@ -123,21 +113,38 @@ class Composer extends React.Component {
             ? `${props.defaultValue}`
             : `${props.value || ''}`;
 
+        this.selection = {
+            start: initialValue.length,
+            end: initialValue.length,
+        };
+
         this.state = {
             numberOfLines: 1,
-            selection: {
-                start: initialValue.length,
-                end: initialValue.length,
-            },
+            value: initialValue,
         };
         this.dragNDropListener = this.dragNDropListener.bind(this);
         this.paste = this.paste.bind(this);
         this.handlePaste = this.handlePaste.bind(this);
         this.handlePastedHTML = this.handlePastedHTML.bind(this);
         this.handleWheel = this.handleWheel.bind(this);
+        this.updateNumberOfLines = this.updateNumberOfLines.bind(this);
+        this.onChangeText = this.onChangeText.bind(this);
+        this.focus = this.focus.bind(this);
+        this.onSelectionChange = this.onSelectionChange.bind(this);
+        this.updateSelection = this.updateSelection.bind(this);
     }
 
     componentDidMount() {
+        // we pass the ref to the native view instance,
+        // however, we want this method to be
+        // available to be called from the outside as well.
+        this.textInput.onChangeText = this.onChangeText;
+        this.textInput.updateSelection = this.updateSelection;
+
+        // overwrite focus with this components implementation
+        this.textInput.nativeFocus = this.textInput.focus;
+        this.textInput.focus = this.focus;
+
         this.updateNumberOfLines();
 
         // This callback prop is used by the parent component using the constructor to
@@ -159,6 +166,8 @@ class Composer extends React.Component {
             document.addEventListener('drop', this.dragNDropListener);
             this.textInput.addEventListener('paste', this.handlePaste);
             this.textInput.addEventListener('wheel', this.handleWheel);
+
+            this.textInput.setSelectionRange(this.selection.start, this.selection.end);
         }
     }
 
@@ -173,11 +182,6 @@ class Composer extends React.Component {
             || prevProps.isComposerFullSize !== this.props.isComposerFullSize) {
             this.updateNumberOfLines();
         }
-
-        if (prevProps.selection !== this.props.selection) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({selection: this.props.selection});
-        }
     }
 
     componentWillUnmount() {
@@ -193,6 +197,39 @@ class Composer extends React.Component {
         this.textInput.removeEventListener('wheel', this.handleWheel);
     }
 
+    onChangeText(text) {
+        // updates the text input to reflect the current value
+        this.setState({value: text});
+
+        // calls the onChangeText callback prop
+        if (this.props.onChangeText != null) {
+            this.props.onChangeText(text);
+        }
+    }
+
+    onSelectionChange(event) {
+        this.selection = event.nativeEvent.selection;
+        this.props.onSelectionChange(event);
+    }
+
+    focus() {
+        // capture the selection, as the "native focus" call will
+        // call onSelectionChange to the end of the text
+        const selection = this.selection;
+
+        this.textInput.nativeFocus();
+        requestAnimationFrame(() => {
+            this.textInput.setSelectionRange(
+                selection.start,
+                selection.end,
+            );
+        });
+    }
+
+    updateSelection(selection) {
+        this.selection = selection;
+    }
+
     /**
      * Handles all types of drag-N-drop events on the composer
      *
@@ -366,22 +403,21 @@ class Composer extends React.Component {
     render() {
         const propStyles = StyleSheet.flatten(this.props.style);
         propStyles.outline = 'none';
-        const propsWithoutStyles = _.omit(this.props, 'style');
+        const propsToPass = _.omit(this.props, 'style', 'defaultValue');
         return (
             <RNTextInput
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                selection={this.state.selection}
-                onChange={() => {
-                    this.updateNumberOfLines();
-                }}
-                onSelectionChange={this.onSelectionChange}
+                onChange={this.updateNumberOfLines}
                 numberOfLines={this.state.numberOfLines}
                 style={propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
-                {...propsWithoutStyles}
+                {...propsToPass}
                 disabled={this.props.isDisabled}
+                onChangeText={this.onChangeText}
+                value={this.state.value}
+                onSelectionChange={this.onSelectionChange}
             />
         );
     }

src/components/Composer/index.android.js → src/components/Composer/index.native.js

@@ -24,12 +24,6 @@ const propTypes = {
     /** Prevent edits and interactions like focus for this input. */
     isDisabled: PropTypes.bool,
 
-    /** Selection Object */
-    selection: PropTypes.shape({
-        start: PropTypes.number,
-        end: PropTypes.number,
-    }),
-
     /** Whether the full composer can be opened */
     isFullComposerAvailable: PropTypes.bool,
 
@@ -43,6 +37,14 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
+    /** The text to display in the input */
+    value: PropTypes.string,
+
+    /** Called when the text gets changed by user input */
+    onChangeText: PropTypes.func,
+
+    /** A value the input should have when it first mounts. Default is empty. */
+    defaultValue: PropTypes.string,
 };
 
 const defaultProps = {
@@ -51,25 +53,32 @@ const defaultProps = {
     autoFocus: false,
     isDisabled: false,
     forwardedRef: null,
-    selection: {
-        start: 0,
-        end: 0,
-    },
     isFullComposerAvailable: false,
     setIsFullComposerAvailable: () => {},
     style: null,
+    value: '',
+    onChangeText: null,
+    defaultValue: '',
 };
 
 class Composer extends React.Component {
     constructor(props) {
         super(props);
 
+        this.onChangeText = this.onChangeText.bind(this);
         this.state = {
             propStyles: StyleSheet.flatten(this.props.style),
+            value: props.defaultValue || props.value,
         };
     }
 
     componentDidMount() {
+        // we pass the ref to the native view instance,
+        // however, we want this method to be
+        // available to be called from the outside as well.
+        this.textInput.onChangeText = this.onChangeText;
+        this.textInput.updateSelection = () => {}; // noop
+
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
         // <constructor ref={el => this.textInput = el} /> this will not
@@ -90,6 +99,16 @@ class Composer extends React.Component {
         this.props.onClear();
     }
 
+    onChangeText(text) {
+        // updates the text input to reflect the current value
+        this.setState({value: text});
+
+        // calls the onChangeText callback prop
+        if (this.props.onChangeText != null) {
+            this.props.onChangeText(text);
+        }
+    }
+
     render() {
         return (
             <RNTextInput
@@ -104,6 +123,11 @@ class Composer extends React.Component {
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...this.props}
                 editable={!this.props.isDisabled}
+                onChangeText={this.onChangeText}
+
+                // we have a value explicitly set so the value can be changed imperatively
+                // (needed e.g. when we are injecting emojis into the text view)
+                value={this.state.value}
             />
         );
     }