Merge pull request #862 from ahmed-s-fatahallah/main

refactor: replace all `useEffect` and `useCallback` with one `useEffect`
TypeFox · Feb 15, 2025 · 7488efc · 7488efc
2 parents 1a57f45 + 7688467
commit 7488efc
Showing 1 changed file with 41 additions and 62 deletions.
diff --git a/packages/wrapper-react/src/index.tsx b/packages/wrapper-react/src/index.tsx
@@ -3,7 +3,7 @@
 * Licensed under the MIT License. See LICENSE in the package root for license information.
 * ------------------------------------------------------------------------------------------ */
 
-import React, { type CSSProperties, useCallback, useEffect, useRef } from 'react';
+import React, { type CSSProperties, useEffect, useRef } from 'react';
 import { MonacoEditorLanguageClientWrapper, type TextContents, type WrapperConfig } from 'monaco-editor-wrapper';
 
 export type MonacoEditorProps = {
@@ -12,8 +12,7 @@ export type MonacoEditorProps = {
     wrapperConfig: WrapperConfig,
     onTextChanged?: (textChanges: TextContents) => void;
     onLoad?: (wrapper: MonacoEditorLanguageClientWrapper) => void;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onError?: (e: any) => void;
+    onError?: (e: unknown) => void;
 }
 
 export const MonacoEditorReactComp: React.FC<MonacoEditorProps> = (props) => {
@@ -30,72 +29,52 @@ export const MonacoEditorReactComp: React.FC<MonacoEditorProps> = (props) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        return () => {
-            destroyMonaco();
+        const destroyMonaco = async () => {
+            try {
+                await wrapperRef.current.dispose();
+            } catch {
+                // The language client may throw an error during disposal.
+                // This should not prevent us from continue working.
+            }
         };
-    }, []);
-
-    useEffect(() => {
-        handleReInit();
-    }, [wrapperConfig]);
-
-    useEffect(() => {
-        handleOnTextChanged();
-    }, [onTextChanged]);
 
-    useEffect(() => {
-        if (containerRef.current) {
-            containerRef.current.className = className ?? '';
-            wrapperConfig.htmlContainer = containerRef.current;
-        }
-    }, [className]);
-
-    const handleReInit = useCallback(async () => {
-        await destroyMonaco();
-        await initMonaco();
-        await startMonaco();
-    }, [wrapperConfig]);
-
-    const initMonaco = useCallback(async () => {
-        if (containerRef.current) {
-            wrapperConfig.htmlContainer = containerRef.current;
-            await wrapperRef.current.init(wrapperConfig);
-        } else {
-            throw new Error('No htmlContainer found! Aborting...');
-        }
-    }, [wrapperConfig]);
+        const initMonaco = async () => {
+            if (containerRef.current) {
+                wrapperConfig.htmlContainer = containerRef.current;
+                await wrapperRef.current.init(wrapperConfig);
+            } else {
+                throw new Error('No htmlContainer found! Aborting...');
+            }
+        };
 
-    const startMonaco = useCallback(async () => {
-        if (containerRef.current) {
-            try {
-                wrapperRef.current.registerTextChangeCallback(onTextChanged);
-                await wrapperRef.current.start();
-                onLoad?.(wrapperRef.current);
-                handleOnTextChanged();
-            } catch (e) {
-                if (onError) {
-                    onError(e);
-                } else {
-                    throw e;
+        const startMonaco = async () => {
+            if (containerRef.current) {
+                try {
+                    wrapperRef.current.registerTextChangeCallback(onTextChanged);
+                    await wrapperRef.current.start();
+                    onLoad?.(wrapperRef.current);
+                } catch (e) {
+                    if (onError) {
+                        onError(e);
+                    } else {
+                        throw e;
+                    }
                 }
+            } else {
+                throw new Error('No htmlContainer found! Aborting...');
             }
-        } else {
-            throw new Error('No htmlContainer found! Aborting...');
-        }
-    }, [onError, onLoad, onTextChanged]);
+        };
 
-    const handleOnTextChanged = useCallback(() => {
-        if (!onTextChanged) return;
-    }, [onTextChanged, wrapperConfig]);
+        (async () => {
+            await initMonaco();
+            await startMonaco();
+        })();
 
-    const destroyMonaco = useCallback(async () => {
-        try {
-            await wrapperRef.current.dispose();
-        } catch {
-            // The language client may throw an error during disposal.
-            // This should not prevent us from continue working.
-        }
-    }, []);
+        return () => {
+            destroyMonaco();
+        };
+
+    }, [wrapperConfig]);
 
     return (
         <div