Investigate double-rendering in React StrictMode

[huy-nguyen]

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

instead of normal appearance like this:

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.

[pomek]

React 18 is live (https://github.com/facebook/react/releases/tag/v18.0.0).

[dilipkumar2k6]

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

[alesna97]

same issue heree

[MuscularSloth]

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.

[pomek]

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.

[tony]

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]

@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]

@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]

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.

[tony]

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)

[SK-website]

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?