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

202
Visualizações
I wonder about differences between using `useEffect()` with empty dependency array and not using `useEffect()` itself

I know useEffect() with no array run the callback only at the first render.

Then what is the differences between useEffect(()=>{},[]) and no useEffect().

I mean between this:

function myComponent() {
  // some states, variables

  useEffect(() => {
    // do something on mount <= this is my current concern.
  }, [/* empty */]);

  // return Element ...
}

and this:

function myComponent() {
  // some states, variables

  // do something on mount <= this is my current concern.
  
  // return Element ...
}
about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

In React, a component re-renders whenever there is a change in it's state or one of it's props.
The reason it behaves like this is so that it would be possible to "react" to a change in the mentioned data, and to reflect UI changes accordingly.

Every time the component re-renders, so does any logic within it that is not cached (functions, variables, etc..)

useEffect helps us with reacting to a change in the state or props that are stated in it's dependency array.
It gives us to option to automatically run a callback function in such an event/s.

useEffect with an empty dependency array, will run only a single time when the component is mounted.

So in this example -

function myComponent() {
  // some states, variables

  useEffect(() => {
    // do something on mount <= this is my current concern.
  }, [/* empty */]);

  // return Element ...
}

The callback function inside the useEffect will run only once, when the component is first "brought to life".
Subsequent renders will not invoke this.

While in this example -

function myComponent() {
  // some states, variables

  // do something on mount <= this is my current concern.
  
  // return Element ...
}

Whatever you put in there will run every time the component re-renders.
Whether this is ok or not depends on your use-case and what function are you trying to run, if it's "cheap" to run or not, etc..

about 4 years ago · Santiago Trujillo Relatório

0

They will be executed every time at component re-render if you put them in function directly

about 4 years ago · Santiago Trujillo Relatório

0

As you mentioned, when you have an empty dependency (like below), the code inside will only run on mount.

  useEffect(() => {
    something() // only runs on mount
  }, []);

If you don't have a useEffect at all, the code will be run every time the component rerenders.

function myComponent() {
  // some states, variables

  something() // runs on every rerender
  
  // return ...
}

Now the question is, "when does a rerender happen?". In general, anytime a parent component renders, React will rerender all children of that component. So rerenders can occur quite often.

Look at this article, which has some really helpful visual examples of when components rerender.

about 4 years ago · Santiago Trujillo 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