Mobile: Fixes #10130: Improve note editor performance when quickly en…

…tering text (#10134)

packages/app-mobile/components/screens/Note.tsx

@@ -62,6 +62,7 @@ import { PluginStates } from '@joplin/lib/services/plugins/reducer';
 import pickDocument from '../../utils/pickDocument';
 import { ContainerType } from '@joplin/lib/services/plugins/WebviewController';
 import PluginPanelViewer from '../../plugins/PluginRunner/dialogs/PluginPanelViewer';
+import debounce from '../../utils/debounce';
 const urlUtils = require('@joplin/lib/urlUtils');
 
 const emptyArray: any[] = [];
@@ -319,7 +320,6 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		this.screenHeader_redoButtonPress = this.screenHeader_redoButtonPress.bind(this);
 		this.onBodyViewerLoadEnd = this.onBodyViewerLoadEnd.bind(this);
 		this.onBodyViewerCheckboxChange = this.onBodyViewerCheckboxChange.bind(this);
-		this.onBodyChange = this.onBodyChange.bind(this);
 		this.onUndoRedoDepthChange = this.onUndoRedoDepthChange.bind(this);
 		this.voiceTypingDialog_onText = this.voiceTypingDialog_onText.bind(this);
 		this.voiceTypingDialog_onDismiss = this.voiceTypingDialog_onDismiss.bind(this);
@@ -329,10 +329,6 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		return this.props.useEditorBeta;
 	}
 
-	private onBodyChange(event: EditorChangeEvent) {
-		shared.noteComponent_change(this, 'body', event.value);
-		this.scheduleSave();
-	}
 
 	private onUndoRedoDepthChange(event: UndoRedoDepthChangeEvent) {
 		if (this.useEditorBeta()) {
@@ -594,7 +590,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		this.scheduleSave();
 	}
 
-	private body_changeText(text: string) {
+	private onPlainEditorTextChange = (text: string) => {
 		if (!this.undoRedoService_.canUndo) {
 			this.undoRedoService_.push(this.undoState());
 		} else {
@@ -603,7 +599,16 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 
 		shared.noteComponent_change(this, 'body', text);
 		this.scheduleSave();
-	}
+	};
+
+	// Avoid saving immediately -- the NoteEditor's content isn't controlled by its props
+	// and updating this.state.note immediately causes slow rerenders.
+	//
+	// See https://github.com/laurent22/joplin/issues/10130
+	private onMarkdownEditorTextChange = debounce((event: EditorChangeEvent) => {
+		shared.noteComponent_change(this, 'body', event.value);
+		this.scheduleSave();
+	}, 100);
 
 	private onPlainEditorSelectionChange = (event: NativeSyntheticEvent<any>) => {
 		this.selection = event.nativeEvent.selection;
@@ -1502,7 +1507,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 						ref="noteBodyTextField"
 						multiline={true}
 						value={note.body}
-						onChangeText={(text: string) => this.body_changeText(text)}
+						onChangeText={this.onPlainEditorTextChange}
 						onSelectionChange={this.onPlainEditorSelectionChange}
 						blurOnSubmit={false}
 						selectionColor={theme.textSelectionColor}
@@ -1524,7 +1529,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 					themeId={this.props.themeId}
 					initialText={note.body}
 					initialSelection={this.selection}
-					onChange={this.onBodyChange}
+					onChange={this.onMarkdownEditorTextChange}
 					onSelectionChange={this.onMarkdownEditorSelectionChange}
 					onUndoRedoDepthChange={this.onUndoRedoDepthChange}
 					onAttach={() => this.showAttachMenu()}

packages/app-mobile/utils/shim-init-react.js

@@ -19,7 +19,6 @@ const injectedJs = {
 	codeMirrorBundle: require('../lib/rnInjectedJs/codeMirrorBundle.bundle'),
 	svgEditorBundle: require('../lib/rnInjectedJs/svgEditorBundle.bundle'),
 	pluginBackgroundPage: require('../lib/rnInjectedJs/pluginBackgroundPage.bundle'),
-	noteBodyViewerBundle: require('../lib/rnInjectedJs/noteBodyViewerBundle.bundle'),
 };
 
 function shimInit() {