Почему компоненты React отрисовываются дважды, когда обернуты в наблюдателя ()

Question

Простая упаковка компонентов React с observer(), кажется, заставляет их рендериться дважды. Каковы возможные причины этого? Я использую последние версии реагировать 16.8.3, mobx 5.9.4 и mobx-реагировать-Lite 1.2.0

Например:

import React from "react";
import { observer } from "mobx-react-lite";

const Item = observer(() => {
  return (
    <div>
      {console.log("render item")}
      Item
    </div>
  );
});

export default Item;

Это происходит в относительно сложном приложении. Я заметил поведение при отладке другой проблемы. Затем я удалил как можно больше кода и смог воспроизвести проблему в очень простом случае.

РЕДАКТИРОВАТЬ : см. Ответ ниже. Мне удалось определить проблему, попытавшись выполнить репо с использованием codesandbox.

Answer 1

Я должен был закончить codesandbox Я работал над тем, чтобы опубликовать вопрос, хотя это может спасти кого-то еще от боли и потерянного времени.Оказывается, причина двойного рендера в том, что я использую React.StrictMode.Интересно, что двойной рендеринг с React.StrictMode, по-видимому, происходит только тогда, когда компонент обернут observer(). Вот код и поле .React.StrictMode используется вокруг всего приложения (index.js), и в случае удаления двойная визуализация останавливается.