ckeditor/ckeditor5-react

Investigate double-rendering in React StrictMode

huy-nguyen opened this issue · 11 comments

huy-nguyen commented

React StrictMode is a tool provided by React to highlight potential problems in React components. When ckeditor5-react is used within StrictMode, it double-renders the editor like this

Screen Shot 2022-03-22 at 11 24 27 AM

instead of normal appearance like this:

Screen Shot 2022-03-22 at 11 24 53 AM

The reason is most likely that certain render-phase lifecycle methods in ckeditor5-react has unexpected side effects.

Render phase lifecycles include the following class component methods:

constructor
componentWillMount (or UNSAFE_componentWillMount)
componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
componentWillUpdate (or UNSAFE_componentWillUpdate)
getDerivedStateFromProps
shouldComponentUpdate
render
setState updater functions (the first argument)

Because the above methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be non-deterministic.

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer

If left unaddressed, these problems can lead to subtle bugs in when ckeditor5-react is used in full concurrent mode in React versions starting from 18 (currently in RC) because React 18 enable concurrent rendering.

dilipkumar2k6 commented

This is a big issue. How can we fix it?

alesna97 commented

same issue heree

MuscularSloth commented

Same issue with console error:
editorwatchdog.js:243 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'model') at editorwatchdog.js:243:1

It appears when route switch and disappears after F5 or when direct link using.

  • 👍2
pomek commented

We fixed the issue, and it should not occur in the latest version of the <CKEDitor> React component => https://github.com/ckeditor/ckeditor5-react/releases/tag/v5.0.1.

  • 👍1
  • ❤️3
tony commented

Same issue with console error: editorwatchdog.js:243 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'model') at editorwatchdog.js:243:1

It appears when route switch and disappears after F5 or when direct link using.

Was this console message fixed when you upgraded to 5.0.1?

pomek commented

@tony, no, this issue wasn't fixed. Would you like to report a new issue for it? Perhaps it's related (somehow) to #241.

tony commented

@pomek After I updated to ckeditor5-react 5.0.0 -> 5.0.1 I stopped getting the Cannot read properties of null (reading 'model') error in sentry.

Maybe they were related? No traceback unfortunately:

./node_modules/@ckeditor/ckeditor5-react/dist/ckeditor.js at line 5:21415

{snip} ve.flush();const t=this._editor;return this._editor=null,t.model.document.off("change:data",this._throttledSave),this._destructor(t)}))}_sav {snip}
//# sourceMappingURL=ckeditor.js.map
pomek commented

That's good news that the error does not occur anymore. Perhaps it was related to promises. Before 5.0.1, they were ignored. Now the component waits to resolve them.

  • 👍1
tony commented

That's what I suspect. It seems so.

If it comes up again I (or anyone else who bumps into it) can make a new issue (and perhaps cite this if they find it in search)

  • 👍1
SK-website commented

Hi. Got the same problem with ckeditor5-react 5.1.0 and React 18.2.0 -
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'model') at editorwatchdog.js:243:1
Is there a way to fix it by myself?