Kokius įrankius ir požiūrius galima naudoti useEffect hook'e?

• Įrankiai:
  • Valymo funkcijos (cleanup functions) prenumeratų atšaukimui, laikmačių nutraukimui ir kt.
  • Priklausomybių masyvas (dependencies array) efektų pakartotiniam vykdymui valdyti.
  • Refs DOM elementų pasiekti arba keičiamų reikšmių saugojimui be perrenderinimo.
  • Individualūs hook'ai sudėtingos efektų logikos organizavimui.
• Požiūriai:
  • Naudoti kelis useEffect logikai atskirti.
  • Sąlyginis efektų vykdymas.
  • useCallback ir useMemo naudojimas nereikalingam funkcijų ir reikšmių perrenderinimui išvengti.
  • Asinchroninių operacijų valdymas async/await funkcijos viduje (pagalbinės asinchroninės funkcijos kūrimas).

useEffect(() => {
  // Efektas: įvykio prenumerata
  const handleResize = () => {
    console.log('Langas pakeistas');
  };

  window.addEventListener('resize', handleResize);

  // Valymas: įvykio atšaukimas išmontuojant arba keičiant priklausomybes
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Tuščias priklausomybių masyvas: efektas vykdomas vieną kartą montuojant

useEffect(() => {
  // Efektas: duomenų įkėlimas
  async function fetchData() {
    const response = await fetch(`/api/data?id=${userId}`);
    const data = await response.json();
    setData(data);
  }

  fetchData();

}, [userId]); // Priklausomybė: efektas vykdomas keičiant userId ir montuojant