why this useEffect (first one) doesn't run on dependency change?-CodePudding


export default function App() {

  // as the useState runs before useEffect, 
  // it means count is avaliable to use in the useEffect 
  // but why it is not running?
  useEffect(() => {
    console.log("I only run on first render.", count);
  },[count]);

  useEffect(() => {
    console.log("I runs on every render/re-render", count);
  });

  // if i use const in place of var, it throws error of lexical scope
  // but as useState run before the effect the count is already in scope, right?
  var [count, setCount] = useState(0);

  useEffect(() => {
    console.log("run on first render and whenever the count changes", count);
  }, [count]);


  return (
    <div className="App">
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev   1)}>count  </button>
    </div>
  );
}

I think this is the order of execution for first render:

run lazy intializers (or we can say run useState) -> redner -> dom update -> broser paint -> run effect

And for re-render: all the things except lazy intializers and effect cleanup before running new effects.

CodePudding user response：

Eslint warns like this

var count: number 'count' was used before it was defined. (no-use-before-define)eslint

You need to move useState for count declaration before the useEffect which uses it as a dependency.

  var [count, setCount] = useState(0);

  useEffect(() => {
    console.log("I only run on first render.", count);
  }, [count]);

CodePudding user response：

You're first effect is using count before it has been defined, so it is always undefined.