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
);
}
CodePudding user response:
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);
}
CodePudding user response:
you can use
componentDidMount(){
openReactModal();
}
componentWillUnmount(){
closeReactModal();
}