Draft.JS: the proper way to detect content change

Question

There is onChange event, but it fires also when carret moves or navigation (arrows etc) button being pushed.

I want to detect if content was changed. Basically i need to detect this only once when the very first change occur. The dumb way "compare content" may work here, but this is an anti-pattern because this task is too resources-expensive.

tobiasandersen · Accepted Answer · 2017-02-22T09:11:59.877

20

Since Draft uses an immutable data structure, it doesn't have to be that resource heavy – comparing references should be enough:

onChange(newEditorState) {
  const currentContent = this.state.editorState.getCurrentContent()
  const newContent = newEditorState.getCurrentContent()

  if (currentContent !== newContent) {
    // Content has changed
  }
}

edited Feb 22 '17 at 09:11

answered Jan 25 '17 at 10:26

tobiasandersen

8,480
3
28
39

Probably not. Immutable.js based data should be compared using Immutable.is(). https://facebook.github.io/immutable-js/docs/#/is – Dominique PERETTI Oct 02 '17 at 12:07
That's not necessary here, and definitely not recommended. Since you get a **new** `contentState` every time it changes, the cheapest way to know if has changed, is to see if the reference has changed. – tobiasandersen Oct 02 '17 at 12:11
1

But if you want to check if, for example, the content has changed since it was loaded from the server... – Dominique PERETTI Oct 02 '17 at 12:24
Yes, then you'd have to use `is()`, but that's not what was asked for here. – tobiasandersen Oct 02 '17 at 12:26
1

Sure, but it's nice to provide guidance to people who just read the title :-) – Dominique PERETTI Oct 02 '17 at 12:28
3

This doesn't work if you only want to detect changes to actual content state (blocks/entities) and not selection. – Dmitry Minkovsky Aug 01 '18 at 23:37
This doesn't detect some style changes done by toolbar – YohanK Jul 01 '21 at 07:11

Draft.JS: the proper way to detect content change

1 Answers1