import "./styles.css";
import { useState } from "react";
import { useWillUnmount } from "rooks";
function Message() {
useWillUnmount(function(props) {
console.log("UNMOUNT", props);
});
return <p> This component will unmount </p>;
}
const App = () => {
const [shouldRender, enableRender] = useState(true);
return (
<div>
<h1>Rook: useWillUnmount Example</h1>
<hr></hr>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<br></br>
<p> Check or Uncheck the box</p>
<input onClick={() => enableRender(!shouldRender)} type="checkBox" />
{shouldRender && <Message />}
</div>
</div>
);
};
export default App;