Avoid direct DOM manipulation and add cleanup.

[raven-wing]

          _:warning: Potential issue_

Avoid direct DOM manipulation and add cleanup.

The component directly manipulates the DOM by creating and appending elements, which is an anti-pattern in React. Also, missing cleanup can cause memory leaks.

 export const MapContainer = () => {
-    const appContainer = document.createElement('div');
-    document.body.appendChild(appContainer);
-
-    const root = ReactDOM.createRoot(appContainer);
-    root.render(<MapWrap />);
+    const [root, setRoot] = React.useState(null);
+
+    React.useEffect(() => {
+        const appContainer = document.createElement('div');
+        document.body.appendChild(appContainer);
+        const newRoot = ReactDOM.createRoot(appContainer);
+        newRoot.render(<MapWrap />);
+        setRoot(newRoot);
+
+        return () => {
+            newRoot.unmount();
+            appContainer.remove();
+        };
+    }, []);
+
+    return null;
 };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

export const MapContainer = () => {
    const [root, setRoot] = React.useState(null);

    React.useEffect(() => {
        const appContainer = document.createElement('div');
        document.body.appendChild(appContainer);
        const newRoot = ReactDOM.createRoot(appContainer);
        newRoot.render(<MapWrap />);
        setRoot(newRoot);

        return () => {
            newRoot.unmount();
            appContainer.remove();
        };
    }, []);

    return null;
};

🧰 Tools

🪛 eslint

[error] 26-32: Prefer default export on a file with single export.

(import/prefer-default-export)

Originally posted by @coderabbitai[bot] in #90 (comment)