ReactでThree.jsの3Dオブジェを描画すると異常に発熱する

Question

How to use plain Three.js in your React apps
https://itnext.io/how-to-use-plain-three-js-in-your-react-apps-417a79d926e0

この記事を参考にしながら、Reactアプリで、Three.jsを描画するコードを書いたのですが、
実行するとmacのファンがやばいくらいうるさくなって、異常に発熱するので、
無限ループがどこかにあるような気がしますが、見つかりません。

このどこかに、悪さをしているところがあると思いますが、
そういうのを見つけるのが得意な方、お願いします。????‍♂️

ThreeCard/index.js

import * as React from 'react'
import threeEntryPoint from './threejs/threeEntryPoint'


export default class ThreeCard extends React.Component {
  componentDidMount() {
    const { fields } = this.props.device.lastLog
    threeEntryPoint(this.threeRootElement, fields)
  }
  render() {
    return <div ref={element => (this.threeRootElement = element)} />
  }
}

ThreeEntryPoint.js

import SceneManager from './SceneManager'

export default (container, fields) => {
  const canvas = createCanvas(document, container)
  const sceneManager = new SceneManager(container, canvas, fields)

  bindEventListeners()
  render()

  function createCanvas(document, container) {
    const canvas = document.createElement('canvas')
    container.appendChild(canvas)
    return canvas
  }

  function bindEventListeners() {
    window.onresize = resizeCanvas
    resizeCanvas()
  }

  function resizeCanvas() {
    canvas.style.width = '100%'
    canvas.style.height = '100%'

    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

    sceneManager.onWindowResize()
  }

  function render(time) {
    requestAnimationFrame(render)
    sceneManager.update()
  }
}

ScreenManager.js

import * as THREE from 'three'

export default (container, canvas, fields) => {
  var scene = new THREE.Scene()
  var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000,
  )
  camera.position.z = 3
  camera.position.y = 1

  var renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  container.appendChild(renderer.domElement)

  // light
  var light = new THREE.PointLight(0xffff00) // soft white light
  light.position.set(5, 5, 5)
  light.castShadow = true //default is false
  scene.add(light)

  // xyz axes
  var axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)

  // cube
  var geometry = new THREE.BoxGeometry(1, 1, 1)
  var material = new THREE.MeshPhongMaterial({ color: 0xffffff })
  var cube = new THREE.Mesh(geometry, material)
  cube.castShadow = true //default is false
  cube.receiveShadow = true //default
  cube.scale.set(0.5, 2, 0.5)
  scene.add(cube)

  var update = function() {
    requestAnimationFrame(update)
    cube.rotation.set(fields.x, fields.y, fields.z) //傾きを変更
    renderer.render(scene, camera)
  }

  function onWindowResize() {
    const { width, height } = canvas

    camera.aspect = width / height
    camera.updateProjectionMatrix()

    renderer.setSize(width, height)
  }

  return {
    update,
    onWindowResize,
  }
}

Answer 1

自己解決しました

ScreenManager.js

  var update = function() {
    // requestAnimationFrame(update) この行がいらない。
    cube.rotation.set(fields.x, fields.y, fields.z) //傾きを変更
    renderer.render(scene, camera)
  }

該当の行を消した途端パフォーマンスが向上しました。

https://github.com/PierfrancescoSoffritti/pierfrancescosoffritti.com/blob/master/src/components/home/header/threejs/SceneManager.js
と比較したら見つかりました。