I have always been wondering how it works: we can call function expression in useEffect when it was defined below:

const Component = () => {
  useEffect(()=>{func()}, [])
  const func = () => console.log("Why?")
  return <></>
}

Will be glad for explanation or link to resource

CodePudding user response：

It's nothing specific to useEffect. In javascript in general, it's fine to create a function which references a function on a later line. Only when you call the function does it becomes a problem if you havn't finished initializing the variables.

let a = () => {
  console.log('in a')
  b();
};

let b = () => {
  console.log('in b');
};

a(); // This is fine, both a and b have been initialized

let a = () => {
  console.log('in a')
  b();
};

a(); // ERROR, because b has not been initialized

let b = () => {
  console.log('in b');
};

useEffect won't call your effect function until after the component has finished rendering, so well after func was defined.