Duplicated editor after show and hide the component using react 18

[michalstrzelecki]

If component is hidden (not in the dom, not rendered) and shown again then it will render twice.

[zengdukan]

I have the same issue by getting-start, also with react 18.

[iliapir2]

I'm having the same issue as well! React 18 + Strict Mode.

[zengdukan]

I find the issue missing after delete <React.StrictMode>, I guess ckeditor5-react not use for React 18's StrickMode

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

[iliapir2]

But for some reason older versions of react worked with Ckedtior even with strict mode

[pomek]

Hey guys,

Thanks for reporting the issue. We're currently focused on other topics. Hence it's hard to say when we will fix the problem. I don't want to promise anything, but we will try to take a look at that in the next week.

However, we will appreciate if you could share steps that allow reproducing the problem,

[FilipTokarski]

I can confirm this, the steps I followed:

• create new app with npx create-react-app
• install ckeditor component npm install --save @ckeditor/ckeditor5-react
• create editor build in online builder, unzip and move to the project folder
• add ckeditor as a dependency with yarn add file:./ckeditor5
• update component's code like in the docs
• run npm run start

Result - there are two editors on the page.

[dev-ankitkumar]

this is a react 18 bug when we use <React.StrictMode> it render twice componenents and when we remove <React.strictMode it work fine

[michalstrzelecki]

yeak, but it should destroy the instance / unmount after component is not visible

[pomek]

I close this issue as DUP of #294. 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.