Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

169
Visualizações
How to do cleanup in useEffect React?

Usually I do useEffect cleanups like this:

useEffect(() => {
    if (!openModal) {
      let controller = new AbortController();
      const getEvents = async () => {
        try {
          const response = await fetch(`/api/groups/`, {
            signal: controller.signal,
          });
          const jsonData = await response.json();
          setGroupEvents(jsonData);
          controller = null;
        } catch (err) {
          console.error(err.message);
        }
      };
      getEvents();
      return () => controller?.abort();
    }
  }, [openModal]);

But I don't know how to do in this situation:

I have useEffect in Events.js file that get events from function and function in helpers.js file that create events on given dates except holidays (holiday dates fetch from database).

Events.js

useEffect(() => {
    if (groupEvents.length > 0) {
      const getGroupEvents = async () => {
        const passed = await passEvents(groupEvents); // function in helpers.js (return array of events)
        if (passed) { 
          setEvents(passed.concat(userEvents));
        } else {
          setEvents(userEvents);
        }
      };
      getGroupEvents();
    }
  }, [groupEvents, userEvents]);

helpers.js

const passEvents = async (e) => {
  try {
    const response = await fetch(`/api/misc/holidays`, {
      credentials: 'same-origin',
    });
    const jsonData = await response.json();
    const holidays = jsonData.map((x) => x.date.split('T')[0]); // holiday dates
    return getEvents(e, holidays); // create events
  } catch (err) {
    console.error(err.message);
  }
};
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Remove ?:

return () => controller.abort();

Like to this: https://www.youtube.com/watch?v=aKOQtGLT-Yk&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=25

Is it what you want?

about 4 years ago · Juan Pablo Isaza Relatório

0

You can either not clean up, which really is also fine in many situations, but if you definitely want to be able to abort the in-flight request, you will need to create the signal from the top-level where you want to be able to abort, and pass it down to every function.

This means adding a signal parameter to passEvents.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda