From 5266c49cfcef8e758e9edf65ad95d600026d50f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emanuel=20J=C3=B6bstl?= Date: Tue, 23 Apr 2019 05:42:25 +0200 Subject: [PATCH] Avoid unnecessary re-renders This update avoids unnecessary re-renders when the current content of the editor is set again as it's html prop. That can happen when a change propagates through a parent component. Please take note that this is not only a performance issue, but it also throws the cursor position off if it's at the end of a line. --- src/editor.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/editor.js b/src/editor.js index bb3a8ba0..1a5b6222 100644 --- a/src/editor.js +++ b/src/editor.js @@ -19,12 +19,12 @@ export default class ReactMediumEditor extends React.Component { } componentDidMount() { - const dom = ReactDOM.findDOMNode(this); + this.dom = ReactDOM.findDOMNode(this); - this.medium = new MediumEditor(dom, this.props.options); + this.medium = new MediumEditor(this.dom, this.props.options); this.medium.subscribe('editableInput', e => { this._updated = true; - this.change(dom.innerHTML); + this.change(this.dom.innerHTML); }); } @@ -36,6 +36,10 @@ export default class ReactMediumEditor extends React.Component { this.medium.destroy(); } + shouldComponentUpdate(nextProps, nextState) { + return nextProps.text !== this.dom.innerHTML; + } + componentWillReceiveProps(nextProps) { if (nextProps.text !== this.state.text && !this._updated) { this.setState({ text: nextProps.text });