Si crea un useEffect con el segundo argumento undefined o null , sí, la devolución de llamada se ejecutará en cada procesamiento.

Eso está bien en un caso como el que se muestra a continuación, en el que no cambia un state dentro de la devolución de llamada, solo registrará "Hello Word" cada vez que haya un procesamiento.

 export default function App() { const [state, setState]= useState(true); useEffect(() => { console.log("Hello Word"); }); return ( <div> <button onClick = {()=>setState(!state)}>Toggle State</button> </div> );

Provocará un bucle infinito de representaciones en caso de que, como a continuación, mute un state dentro de la devolución de llamada. Esto se debe a que un cambio de estado desencadena un procesamiento y la devolución de llamada se ejecuta en cada procesamiento.

 export default function App() { const [state, setState]= useState(true); useEffect(() => { setState(!state); }); return ( <div> <button onClick = {()=>setState(!state)}>Toggle State</button> </div> );

Y para cubrir todos los casos de uso, está el que tiene una matriz de dependencias vacía como segundo argumento, donde la devolución de llamada se ejecuta solo en el primer procesamiento:

 export default function App() { const [state, setState]= useState(true); useEffect(() => { setState(!state); },[]); return ( <div> <button onClick = {()=>setState(!state)}>Toggle State</button> </div> );

Y finalmente, el que llama a la devolución de llamada en el primer renderizado y cada vez que cambia algún state en la matriz de dependencias:

 export default function App() { const [state, setState]= useState(true); useEffect(() => { console.log("Hello Word"); // setState(!state); if you mutate state here, it will cause an infinite loop of renders },[state]); return ( <div> <button onClick = {()=>setState(!state)}>Toggle State</button> </div> );

Volverá a representar cada círculo si la deps no está definida o es nula.

En la fuente de reacción, cuando el segundo argumento no está definido, deps será null , updateEffectImpl , siempre ejecutará pushEffect y representará cada círculo:

 function updateEffectImpl(fiberFlags, hookFlags, create, deps): void { const nextDeps = deps === undefined ? null : deps; if (currentHook !== null) { // .eg } // always execute hook.memoizedState = pushEffect( HookHasEffect | hookFlags, create, destroy, nextDeps, ); }