Fix nested options dispose in strict mode (#825)

Author: ivanblinov2k17

packages/devextreme-react/src/core/__tests__/component.test.tsx

@@ -62,7 +62,7 @@ describe('rendering', () => {
       </TestComponent>
     );
     const { container, unmount, rerender } = render(
-      component, { legacyRoot: true }
+      component, { legacyRoot: true },
     );
 
     unmount();
@@ -171,6 +171,17 @@ describe('rendering', () => {
     expect(WidgetClass.mock.instances[1]).toEqual({});
   });
 
+  it('clears nested option in strict mode', () => {
+    render(
+      <React.StrictMode>
+        <TestComponent>
+          <TestComponent />
+        </TestComponent>
+      </React.StrictMode>,
+    );
+    expect(Widget.clearExtensions).toHaveBeenCalledTimes(4);
+  });
+
   it('do not pass children to options', () => {
     render(
       <TestComponent>
@@ -185,8 +196,8 @@ describe('rendering', () => {
 describe('element attrs management', () => {
   it('passes id, className and style to element', () => {
     const { container } = render(
-      <TestComponent id="id1" className="class1" style={{ background: 'red' }} />, {
-      },
+      <TestComponent id="id1" className="class1" style={{ background: 'red' }} />,
+      {},
     );
 
     const element: HTMLElement = container.firstChild as HTMLElement;

packages/devextreme-react/src/core/__tests__/test-component.ts

@@ -18,6 +18,7 @@ const Widget = {
   off: (event: string, handler: (e: any) => void) => {
     eventHandlers[event] = eventHandlers[event].filter((e) => e !== handler);
   },
+  clearExtensions: jest.fn(),
   dispose: jest.fn(),
   skipOptionsRollBack: false,
 };
@@ -36,6 +37,11 @@ class TestComponent<P = any> extends Component<P> {
     super._createWidget(element);
     Widget.option.mockReset();
   }
+
+  clearExtensions(): void {
+    super.clearExtensions();
+    Widget.clearExtensions();
+  }
 }
 class TestPortalComponent<P = any> extends TestComponent<P> {
   protected isPortalComponent = true;

packages/devextreme-react/src/core/component.ts

@@ -18,6 +18,15 @@ class Component<P> extends ComponentBase<P> {
     this._createExtensions();
   }
 
+  public componentWillUnmount(): void {
+    super.componentWillUnmount();
+    this.clearExtensions();
+  }
+
+  public clearExtensions(): void {
+    this._extensionCreators = [];
+  }
+
   protected renderChildren(): Record<string, unknown>[] | null | undefined {
     return React.Children.map(
       this.props.children,