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

137
Visualizações
What happens for an useEffect with the second argument is null or undefined?

I just wanted to know how useEffect will behave if we pass the second argument as null or undefined in place of the dependencies array. Will it render on every cycle? Or just once? Any leads will be appreciated.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

If you create an useEffect with the second argument undefined or null, yes the callback will gets executed on every render.

That's okay in a case like below where you don't mutate a state inside the callback, it will just log "Hello Word" every time there is a render.

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

It will cause an infinite loop of renders in case like below where you mutate a state inside the callback. That's because a state change trigger a render, and the callback gets executed on every render.

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

And to cover all the use cases, there is the one with an empty dependencies array as second argument, where the callback gets executed only on first render:

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

And finally the one that calls the callback on first render and every time some state in the dependencies array changes:

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>
  );
about 4 years ago · Juan Pablo Isaza Relatório

0

It will rerender every circle if deps is not defined or is null.

In react source, when second argument not defined, deps will be null, updateEffectImpl, will always execute pushEffect, and render every circle :

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,
  );
}
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