Using a React component for part of a custom JS application - How to clean up?

Question

I have recently started to use React for specific parts of my custom JavaScript application. It is going well, but I don't quite understand how I can "unmount" or "stop rendering" or "clean up" a React component when I no longer need it?

Consider the following example of opening a modal that is a React component. How do I then close it and clean up the React side of things properly?

MyApp.js (JavaScript only, no React)

import { renderReactModal } from "./ReactModal.jsx";

class MyApp {

    // I call this when I want to show my React component
    openReactModal() {

        // Create an empty div and append it to the DOM
        this.modalDomElem = document.createElement("div");
        document.append(this.modalDomElem);

        // Render the React component into the div
        renderReactModal(this.modalDomElem);
    }

    // I call this method when I want to hide my React component
    closeReactModal() {
        // Is it enough to do this to unmount / stop the React component from rendering?
        // Or is there any other React-specific clean-up code required?
        this.modalDomElem.remove();
    }
}

ReactModal.jsx (React goes here)

import React from "react";
import ReactDOM from "react-dom";

class ReactModal extends React.Component {

    render() {
        return <h2>React Modal</h2>
    }
}

export const renderReactModal = (domElem) => {
    // NB: This syntax is for React 16 (different in 18).
    ReactDOM.render(
        <ReactModal />,
        domElem
    );
}

score 0 · Answer 1 · answered Jun 10 '22 at 09:01

I searched some more and eventually found my way to this section of the React Docs: https://reactjs.org/docs/react-dom.html#unmountcomponentatnode

It seems that using ReactDOM.unmountComponentAtNode(container) is the recommended way to achieve this:

Remove a mounted React component from the DOM and clean up its event handlers and state.

Using that idea, I can change my initial code as follows.

MyApp.js (JavaScript only, no React)

import { mountReactModal, unmountReactModal } from "./ReactModal.jsx";

class MyApp {

    // I call this method when I want to show my React component
    openReactModal() {

        // Create an empty div and append it to the DOM
        this.modalDomElem = document.createElement("div");
        document.append(this.modalDomElem);

        // Mount the React component into the div
        // NB: This causes the React component to render
        mountReactModal(this.modalDomElem);
    }

    // I call this method when I want to hide my React component
   closeReactModal() {

        // Unmount the React component from the div
        // NB: This cleans up the React component's event handlers and state
        unmountReactModal(this.modalDomElement);

        // Remove the div from the DOM
        this.modalDomElem.remove();
    }
}

ReactModal.jsx (React goes here)

import React from "react";
import ReactDOM from "react-dom";

class ReactModal extends React.Component {

    render() {
        return <h2>React Modal</h2>
    }
}

// Mount
export const mountReactModal = (domElem) => {
    // NB: This syntax is for React 16 (different in 18).
    ReactDOM.render(
        <ReactModal />,
        domElem
    );
}

// Unmount
export const unmountReactModal = (domElem) => {
    // NB: This syntax is for React 16 (different in 18).
    ReactDOM.unmountComponentAtNode(domElem);
}

Using a React component for part of a custom JS application - How to clean up?

1 Answers1