How remove or unmount React App from a website properly

Question

How remove or unmount React App from a website properly

7.7k Views Asked by NadfriJS At 05 April 2025 at 03:38

In my website, i have a button to launch an react app in a specific div. When i click upon it, i create a react root div and render the react app inside. What is the proper way to close it?

   <!--HTML from the website -->
  <body>
    <button id="btn">Launch React App</button>
    
    <script type="module" src="/src/main.tsx"></script>
  </body>

//main.js from the react App
import React from "react";
import ReactDOM from "react-dom/client";
import "./global.scss";
import App from "./App";

const btn = document.getElementById("btn");

btn.onclick = () => {
  const root_div = document.createElement("div");
  root_div.id    = "root";
  document.body.appendChild(root_div);

  const root = ReactDOM.createRoot(root_div);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

Original Q&A

There are 2 best solutions below

arfi720 On 10 May 2022 at 13:45

If all you need to do is remove the whole react app div, use removeChild - you get a reference to the parent then call removeChild with a reference to the child element as parameter.

You have those references above, so you should be able to do something like:

document.body.removeChild(root_div)

Or possibly you need to get the reference to the root div first, like:

const root_elem = document.getElementById("root");
document.body.removeChild(root_elem)

To unmount a component (even the root component) the react way, it seems to be recommended to do:

unmountComponentAtNode(document.getElementById('root'));

**NadfriJS** · Accepted Answer

Finally I did this for React v18:

  <!--HTML from the website -->
  <body>
    <button id="btn">Launch React App</button>
    
    <script type="module" src="/src/main.tsx"></script>
  </body>

//main.js
/*Librairies*/
import React from 'react';
import ReactDOM from 'react-dom/client'; //React 18
/*Components*/
import App from './App';
import CloseApp from './components/CloseApp/CloseApp';
/*CSS*/
import './global.scss';

const btn = document.getElementById('btn');

/*CREATE ROOT ELEMENT & RENDER IT with React 18*/
btn.onclick = () => {

  const div_root = document.createElement('div');
  div_root.id    = 'div_root';

  const root = ReactDOM.createRoot(div_root);
  document.body.appendChild(div_root);

  root.render(
    <React.StrictMode>
      <App />
      <CloseApp root={root} />
    </React.StrictMode>
  );
};

//CloseApp.js
import ReactDOM from 'react-dom/client'; //React 18
export default function CloseApp({ root }) {
  const close = () => {
    const div_root = document.getElementById('div_root');
    root.unmount(); //React 18
    div_root.remove();
  };

  return (
    <button onClick={close}>CLOSE</button>
  );
}

How remove or unmount React App from a website properly

There are 2 best solutions below

Related Questions in REACTJS

Related Questions in RENDER

Related Questions in ROOT

Related Questions in MICRO-FRONTEND

Related Questions in UNMOUNT

Trending Questions

Popular # Hahtags

Popular Questions