react useEffect trigger although dependency value remain the same?

Question

Why the log still trigger although I didn't do setTest to change the test value? I expect for the first time the log should not trigger because the test value remain 0?

function App() {
  const [test, setTest ] = useState(0)

  useEffect(() => {
    console.log('log')
  }, [test])

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

I have a scenario like this. on first load don't do anything, then if user select an option on the page then do something, how do I do that with useEffect?

Answer 1

(1)first useEffect call is when component mount.

useEffect(() => {
    console.log('log')
  }, [test])

(2)if you pass second Array dependencies argument to useEffect and that argument wasn't empty, any time one of that dependency changes useEffect also recalled.

useEffect(() => {
    console.log('log')
  }, [test])

(3) if array of dependencies was empty, useEffect only one time called(after component mount for first time).

useEffect(() => {
    console.log('log')
  }, [])

(4)if useEffect implementing without second argument any time component state update useEffect also called.

useEffect(() => {
    console.log('log')
  })

for your situation you can check if test is 0 cancel execute useEffect body code like this:

function App() {
  const [test, setTest ] = useState(0)

  useEffect(() => {
   if(test < 1) return;
    console.log('log')
  }, [test])


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}