Realmente no sé qué está pasando, pero creo que removeEventListener no funciona correctamente. Aquí está mi código, mi aplicación se bloquea cada vez que hago clic más de 5 veces en cualquiera de los botones y no puedo encontrar una solución en ninguna parte.
const doTri = (e) => { if(e.id === "active"){ setOrder(!order); } else { document.getElementById("active")?.removeAttribute("id"); e.setAttribute('id', 'active'); setTri(e.classList[1]); setOrder(true) } } useEffect(() => { Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{ e.addEventListener('click', ()=>{doTri(e)}) }) return () => { Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{ e.removeEventListener('click',()=>{doTri(e)}) }) } }, [tri,order])como dije, la función removeEventListener no funcionaba, así que hice algunos cambios para no pasar ningún parámetro a las funciones do tri, eso es lo que hice y funcionó.
const doTri = (e) => { if(e.currentTarget.id === "active"){ setOrder(!order); } else { document.getElementById("active")?.removeAttribute("id"); e.currentTarget.setAttribute('id', 'active'); setTri(e.currentTarget.classList[1]); setOrder(true) } } useEffect(() => { Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{ e.addEventListener('click', doTri) }) return () => { Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{ e.removeEventListener('click', doTri) }) } }, [tri,order])