组件渲染两次？ 是codeandbox的问题吗？

Question

Here is my simple React-app:

let idCounter = 0;

export default function App() {
  const id = useMemo(() => {
    console.log("useMemo");
    return idCounter++;
  }, []);

  console.log("render", id);

  useEffect(() => {
    console.log("useEffect", id);
  });

  return id;
}

https://codesandbox.io/s/morning-bush-swky8

This is the console output:

useMemo
render 0
useEffect 1

Why in useEffect id is equal to 1 ?

Seems like the component has been rendered twice, but why useMemo and useEffect haven't been called for the second time? How id became 1 ?

Answer 1

From React Docs - Strict Mode:

Starting with React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used.

Your component is indeed rendered twice but the log statements are hidden by React during the second re-render caused by StrictMode .

You will get the expected output if you remove the StrictMode .

Another option is to use a different method on console object for logging, such as console.dir .

 let idCounter = 0; function App() { const id = React.useMemo(() => { console.dir("useMemo"); return idCounter++; }, []); console.dir("render"); console.dir(id); React.useEffect(() => { console.log("useEffect", id); }); return id; } ReactDOM.render( <React.StrictMode> <App/> </React.StrictMode>, document.querySelector("#root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script> <div id="root"></div>