useEffect in REACT

Question

Can anyone explain why the event listener is used inside the useEffect, how many times useEffect will be triggered and how the returned function is working to remove the listener? Kinda feeling bamboozled.
`
import React, { useState, useEffect } from "react";

// cleanup function
// second argument

const UseEffectCleanup = () => {
const [size, setSize] = useState(window.innerWidth);

// console.log(size);

const checkSize = () => {
setSize(window.innerWidth);
};

useEffect(() => {
console.log("inside useEffect");
window.addEventListener("resize", checkSize);

return () => {
console.log("cleaning listener");
window.removeEventListener("resize", checkSize);
};
});

return (
<>
<h1>Window</h1>

<h2>{size} px</h2>
</>
);
};

export default UseEffectCleanup; `

Answer 1

Izac Espinoza thanks :)