组件中的 Function 在 React js 中被调用两次

Question

I am using useMemo react hook in the function component. I am not sure why the console log is getting twice printed. Here below is my code:

import './App.css';
import react,{useState,useMemo} from 'react';

function App() {

  const [count,setCount] = useState(0);
  const [item,setItem] = useState(10);

  const multiCountMemo = useMemo(function multiCount() {
    console.log("to check if getting inside the function")  <---- this is getting printed twice by default on load app page.
    return count * 5
  },[count])


  return (
    <div className="App">
      <h1>useMemo Hook Usage</h1>

      <h2>Count : {count}</h2>
      
      <h2>Item : {item}</h2>

      <h2>{multiCountMemo}</h2>

      <button onClick={() => setCount(count + 1)}>Update Count</button>
      
      <button onClick={() => setItem(item * 10)}>Update Item</button>
    </div>
  );
}

export default App;

Answer 1

This is due to strict mode check the docs here .

useEffect in react version 18 causes the component to unmount and mount again after it mounts the first time. This is why the console.log is triggering twice

note that this only happens in development mode and not production