ckeditor5-react icon indicating copy to clipboard operation
ckeditor5-react copied to clipboard

onReady is called after <CKEditor> is unmounted

Open stonebk opened this issue 1 year ago • 0 comments

A bit of an edge case I ran into while testing. I have a component that looks something like this:

    const [editor, setEditor] = useState<HeadlessEditor>(); 
    const onReadyCallback = useCallback(
      (editor) => {
        setEditor(editor);
      },
      []
    );

    return <CKEditor config={config} editor={MyEditor} onReady={onReadyCallback}  />;

I have some small tests that run faster than it takes to initialize the editor, so <CkEditor> unmounts before onReady is called, but onReady is called anyways resulting in the following warning:

  console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

My guess is that this is because the onReady call happens in a setTimeout:

				// The `onReady` callback should be fired once the `editor` property
				// can be reached from the `<CKEditor>` component.
				// Ideally this part should be moved to the watchdog item creator listeners.
				setTimeout( () => {
					if ( this.props.onReady ) {
						this.props.onReady( editor );
					}
				} );

Would be nice to not have to work around this!

stonebk avatar Apr 17 '24 23:04 stonebk