score:1

Accepted answer

you can return timerid while creating timeout. and on unmount u can clean using return function of useeffect.

unmount:

  useeffect(() => {
    const timerid = createcontent();
    handlemobilecontainerview();
    return () => {
      cleartimeout(timerid);
    };
  }, []);

return timerid:

  const delaycontent = (content) => {
    let timerid;
    if (firsttime) {
      timerid = settimeout(() => {
        setcurrentcontent(content);
        setfirsttime(false);
      }, 200);
    } else if (!firsttime) {
      timerid = settimeout(() => {
        setcurrentcontent(content);
      }, 450);
    }
    return timerid;
  };

// all code:

function a() {
  useeffect(() => {
    const timerid = createcontent();
    handlemobilecontainerview();
    return () => {
      cleartimeout(timerid);
    };
  }, []);
  const createcontent = () => {
    if (contentcompshowstatus) {
      for (let key in btnstatus) {
        if (btnstatus.hasownproperty(key)) {
          if (btnstatus[key] === true) {
            if (key === "aboutbtn") {
              return delaycontent("about-contents");
            } else if (key === "skillsbtn") {
              return delaycontent("skills-contents");
            } else if (key === "projectsbtn") {
              return delaycontent("projects-contents");
            }
          }
        }
      }
    }
  };

  const delaycontent = (content) => {
    let timerid;
    if (firsttime) {
      timerid = settimeout(() => {
        setcurrentcontent(content);
        setfirsttime(false);
      }, 200);
    } else if (!firsttime) {
      timerid = settimeout(() => {
        setcurrentcontent(content);
      }, 450);
    }
    return timerid;
  };
}

score:1

you can use useeffect to return a function which should do the job of cleaning up of the settimouts and setintervals. for eg,

useeffect(() => {
  const timer = settimeout(somefunc, 100);
  return () => cleartimeout(timer);
});

to cleanup settimouts, use cleartimeout and clearinterval for setinterval. documentation

as far as your code is concerned,

  useeffect(() => {
    const timers = createcontent();
    handlemobilecontainerview();
    return () => timers.foreach(timer => window.cleartimeout(timer));
  });

  const createcontent = () => {
    let timers = [];
    if (contentcompshowstatus) {
      for (let key in btnstatus) {
        if (btnstatus.hasownproperty(key)) {
          if (btnstatus[key] === true) {
            if (key === 'aboutbtn') {
               timers.push(delaycontent('about-contents'));
            } else if (key === 'skillsbtn') {
               timers.push(delaycontent('skills-contents'));
            } else if (key === 'projectsbtn') {
               timers.push(delaycontent('projects-contents'));
            }
          }
        }
      }
    }
    return timers;
  };


  const delaycontent = (content) => {
    let timer;
    if (firsttime) {
      timer = settimeout(() => {
        setcurrentcontent(content);
        setfirsttime(false);
      }, 200);
    } else if (!firsttime) {
      timer = settimeout(() => {
        setcurrentcontent(content);
      }, 450);
    }
    return timer;
  };

Related Query

More Query from same tag