//componentDidMount useEffect(() => { console.log("Behavior before the component is added to the DOM"); }, []); //componentDidUpdate useEffect(() => { console.log("Behavior when the component receives new state or props."); }); //Or useEffect(() => { console.log("Behavior when the value of 'stateName' changes."); }, [stateName]); //Or import React, { useEffect, useRef } from "react" const mounted = useRef() useEffect(() => { if (!mounted.current) { // do componentDidMount logic mounted.current = true } else { // do componentDidUpdate logic } }) //componentWillUnmount useEffect(() => { return () => { console.log("Behavior right before the component is removed from the DOM."); } }, []); //Putting it all together useEffect(() => { const intervalId = setInterval(() => { document.title = `Time is: ${new Date()}`; }, 1000); return () => { document.title = "Time stopped."; clearInterval(intervalId); } }, []);