Difference between with and without useEffect in react functional component

Question

I have a react functional component and I want to run some code in every render . You know useEffect hook without dependency array runs every time on render.

heres the code

function Component({a, b}){

useEffect(()=>{
  console.log('component rerenderd')
  // some code here
})

 return(
  <div>
    Some content
  </div>
  )
}

on the other hand without useEffect doing same thing

function Component2({a, b}){

  console.log('component rerenderd')
  // some code here

 return(
  <div>
    Some content
  </div>
  )
}

My question is what is the difference between both of them ?

Answer 1

useEffect callbacks executed after the render phase which is the main difference between the two.

See the next example:

// Log order:
// "executed at render phase"
// "executed after render phase"

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

Read more here