Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

200
Views
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 answers
Answer question

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 Report

0

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

about 4 years ago · Santiago Trujillo Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!