Jaka jest różnica między useEffectem bez tablicy zależności, a wykonaniem kodu bez useEffecta

Zakładając, że mam dwie sytuacje:

1. Logikę, która wykonuje się w komponencie i która jest dodana do useEffecta. useEffect nie ma podanej tablicy zależności.
2. Logikę, która wykonuje się bezpośrednio w komponencie bez używania useEffecta.

Jaka jest różnica pomiędzy tymi dwoma sytuacjami ? W przypadku drugiej sytuacji komponent zwraca mi błąd, że wykonano zbyt wiele ponownych renderingów. Natomiast w przypadku pierwszej sytuacji już takiego błędu nie zwraca i aplikacja uruchamia się poprawnie.

Prościej byłoby jakbyś wstawił dwa przykłady, o których piszesz, ale z takich widocznych różnic

1. Wywołanie dodatkowej funkcji, która usunie skutki uboczne.

   useEffect(() => {
     const scrollEvent = () => {};
     window.addEventListener('scroll', scrollEvent);
   
     return () => {
       window.removeEventListener('scroll', scrollEvent);
     };
   });
   

   Bez removeEventListener wszystkie eventy scroll nachodziły by na siebie i wykonywały wielokrotnie.
2. W momencie wywołania useEffect komponent jest już wyrenderowany, więc możemy w bezpieczny sposób korzystać z funkcji podobnych do useRef.
3. Wywołanie kodu asynchronicznego (renderowanie komponentów odbywa się w sposób synchroniczny, więc, aby odczytać wynik z kodu asynchronicznego musimy zaczekać, aż wszystko zostanie wyrenderowane).

mielony711 napisał(a):

Zakładając, że mam dwie sytuacje:

1. Logikę, która wykonuje się w komponencie i która jest dodana do useEffecta. useEffect nie ma podanej tablicy zależności.
2. Logikę, która wykonuje się bezpośrednio w komponencie bez używania useEffecta.

Użycie useEffect(func, []) (z pustą tablicą) znaczy "zmiana żadnej property nie wpłynie na odnowienie efektu", czyli pusta tablica znaczy []: "nigdy".
Użycie useEffect(func) (bez tablicy), znaczy "zmiana każdej property wypłnie na odnowienie efektu", czyli nie przekazanie tablicy znaczy prawie to samo co nie używanie useEffect() w ogóle. Możesz sobie tłumaczyć że domyślnie jako array przekazane są wszystkie propy.

To teraz pojawia się pytanie po co w ogóle useEffect() bez tablicy, skoro można "po prostu" wywołać sobie tą funkcję. Ano właściwie tylko po to żeby nie zablokować rendera (bo kod w useEffect() jest asynchroniczny, i nie blokuje renderowania komponentu).

mielony711 napisał(a):

Jaka jest różnica pomiędzy tymi dwoma sytuacjami ? W przypadku drugiej sytuacji komponent zwraca mi błąd, że wykonano zbyt wiele ponownych renderingów. Natomiast w przypadku pierwszej sytuacji już takiego błędu nie zwraca i aplikacja uruchamia się poprawnie.

Pewnie masz setState() na jakąś property.