0

why the console.log(props.name + " promise" + i); log twice ?

Code is Here

let i = 0;
function CompHook(props) {
  console.log(props.name + " CompHook render" + i);
  Promise.resolve().then(() => {
    i++;
    console.log(props.name + "  promise" + i);
  });

  React.useEffect(() => {
    console.log(props.name + "  useEffect");
    return () => console.log(props.name + "  useEffect destory");
  }, []);
  React.useLayoutEffect(() => {
    console.log(props.name + "  useLayoutEffect");
    return () => console.log(props.name + "  useLayoutEffect destory");
  }, []);

  return props.children || "A";
}

console.log(" start ...");


export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="App">
      <h1 onClick={() => setShow((t) => !t)}>Hello CodeSandbox</h1>
      {show && (
        <>
          <CompHook name="a"></CompHook>
        </>
      )}
    </div>
  );
}
tkitesy
  • 11
  • Presumably, `CompHook` is being rendered twice. – MinusFour Mar 02 '21 at 12:31
  • 1
    Because CodeSandbox's default template wraps your code in [`StrictMode`](https://reactjs.org/docs/strict-mode.html). One of the ways that helps you identify unsafe lifecycle use is by double-invoking various component functions. – T.J. Crowder Mar 02 '21 at 12:34

0 Answers0