Почему canvas отрисовывается несколько раз в react?

Question

[killreals]

У меня есть компонент, который отрисовывает canvas three.js, проблема в том, что когда я открываю страницу в браузере, вижу 2, или даже 4 канваса, если предварительно нажму на функцию
Код инициализации рендера:

const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
        renderer.shadowMap.enabled = true;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMapSoft = true;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.5;
      
        document.body.appendChild(renderer.domElement);

Компонент функциональный, скинуть весь не могу, поскольку он на 500+ строк.
Могу прислать еще что-то, если нужно. Мне кажется , что это особенность react, которая по нескольку раз запускаетс процесс рендринга компонента, обновляя состояние, а поскольку я подключаю канвас через appendchild, он запускает несколько раз эту команду. Как можно этого избежать?

Comments

[Aetae]

Для начала разбей свой компонент на 100500 строк на 10050 маленьких компонентов\отельных хуков. Потом приходи.

[Alexandroppolus]

Наверняка в корне реактовского дерева есть мерзкий < React.StrictMode >