React Application with Widgets

[abdcelik]

I want to write custom widgets for the DeckGL component in my React app. I investigated a bit but couldn't manage the rendering process. I can't use Preact due to requirements. How can I handle this? I tried a few things using 'react-dom/client' but wasn't successful. The warning I get during mount and unmount operations is as follows:

Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

[abdcelik]

https://deck.gl/docs/api-reference/react/use-widget#usage

[abdcelik]

When I use the simple component below as a child of DeckGL, this component renders multiple times. With small canvas movements, onRemove, setProps, and onAdd are called repeatedly, which causes flickering. What am I missing here?

import { useMemo } from 'react';
import { createPortal } from 'react-dom';
import { useWidget } from '@deck.gl/react';
import type { Widget } from '@deck.gl/core';

export type MyWidgetExternalProps = {
    id?: string;
};

type MyWidgetInternalProps = MyWidgetExternalProps & {
    element: HTMLDivElement;
};

class MyWidget implements Widget<MyWidgetInternalProps> {
    id = 'my-widget';
    props: MyWidgetInternalProps;
    element: HTMLDivElement;

    static defaultProps: Required<MyWidgetExternalProps> = {
        id: 'my-widget',
    };

    constructor(props: MyWidgetInternalProps) {
        console.log('[MyWidget] ctor', props);
        this.id = props.id ?? MyWidget.defaultProps.id;
        this.element = props.element;
        this.props = { ...MyWidget.defaultProps, ...props };
    }

    onAdd(): HTMLDivElement {
        console.log('[MyWidget] onAdd');
        return this.element;
    }

    onRemove() {
        console.log('[MyWidget] onRemove');
    }

    setProps(next: Partial<MyWidgetInternalProps>) {
        console.log('[MyWidget] setProps', next);
    }
}

export const MyReactWidget = (props: MyWidgetExternalProps) => {
    const element = useMemo(() => document.createElement('div'), []);
    useWidget(MyWidget, { ...props, element });
    return createPortal(
        <div>Hello World</div>,
        element
    );
};