Почему компонент рендерится дважды? Проблема в codesandbox?

Question

[J. Snow]

Есть простое React-приложение:

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

Вывод в консоль:

useMemo
render 0
useEffect 1

Почему в useEffect id стал равен 1 ?

Ощущение, что компонент полностью отрендерился 2 раза. Но тогда почему useMemo и useEffect не вызвались второй раз? Как id стал равным единице?

Answer 1

[Alexandroppolus]

Эта хрень из-за < StrictMode > в index.ts. С ним начинает твориться какая-то абсолютно черная магия. Ещё и делается замена console.log, чтобы скрыть правду ))

https://codesandbox.io/s/suspicious-bohr-crvsh - используется сохраненная функция console.log, видно два рендера.

без < StrictMode > всё как ожидалось.

Comments

[Alexandroppolus]

https://ru.reactjs.org/docs/strict-mode.html

тут написано, что некоторые методы жизненного цикла вызываются дважды, в dev-режиме

[J. Snow]

Alexandroppolus, отлично! То что я искал.
Оказывается эта штука ещё и console.log подменяет, и поэтому первый вызов не выводится в консоль:

Начиная с 17 версии, React автоматически модифицирует методы для работы с консолью (например, console.log()), чтобы предотвратить запись в консоль при втором вызове функций жизненного цикла.

Answer 2

[TheOnlyFastCoder2]

Может быть вы хотели сделать что то подобное ?

import React, { useState } from "react";

export default function App() {
  let [getID,setID] = useState(0);
  return (
    <>
      <p> {getID} </p>
      <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
    </>
  )
}

или что то вроде этого

import React, { useState } from "react";

const MemoID = ({getID}) => {
  return Array.from(new Array(getID)).map( (_,i) => {
    return (<p key={i}> {i} </p>)
  })
}

export default function App() {
  let [getID,setID] = useState(0);
  return (
    <>
      <MemoID key={getID} {...{getID}}/>
      <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
    </>
  )
}