title: Ref callbacks & this.mount - reactJS
body: <p>I was reading the top answer to this question.</p>
  
  <p><a href="https://stackoverflow.com/questions/41248287/how-to-connect-threejs-to-react">How to connect Threejs to React?</a></p>
  
  <p>Someone provided this great example of using threejs in react: </p>
  
  <pre><code>import React, { Component } from 'react'
  import * as THREE from 'three'
  
  class Scene extends Component {
  constructor(props) {
  super(props)
  
  this.start = this.start.bind(this)
  this.stop = this.stop.bind(this)
  this.animate = this.animate.bind(this)
  }
  
  componentDidMount() {
  const width = this.mount.clientWidth
  const height = this.mount.clientHeight
  
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(
    75,
    width / height,
    0.1,
    1000
  )
  const renderer = new THREE.WebGLRenderer({ antialias: true })
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: '#433F81' })
  const cube = new THREE.Mesh(geometry, material)
  
  camera.position.z = 4
  scene.add(cube)
  renderer.setClearColor('#000000')
  renderer.setSize(width, height)
  
  this.scene = scene
  this.camera = camera
  this.renderer = renderer
  this.material = material
  this.cube = cube
  
  this.mount.appendChild(this.renderer.domElement)
  this.start()
  }
  
  componentWillUnmount() {
  this.stop()
  this.mount.removeChild(this.renderer.domElement)
  }
  
  start() {
  if (!this.frameId) {
    this.frameId = requestAnimationFrame(this.animate)
  }
  }
  
  stop() {
    cancelAnimationFrame(this.frameId)
  }
  
  animate() {
  this.cube.rotation.x += 0.01
  this.cube.rotation.y += 0.01
  
  this.renderScene()
  this.frameId = window.requestAnimationFrame(this.animate)
  }
  
  renderScene() {
    this.renderer.render(this.scene, this.camera)
  }
  
  render() {
  return (
    &lt;div
      style={{ width: '400px', height: '400px' }}
      ref={(mount) =&gt; { this.mount = mount }}
    /&gt;
  )
  }
  }
  
  export default Scene
  </code></pre>
  
  <p>I do not understand <code>this.mount</code> . What is <code>this.mount</code>? It seems to be used to access client width and client height. And what is the ref callback function <code>ref={(mount) =&gt; { this.mount = mount }}</code> doing?</p>
  
  <p>I did some research and found that ref callbacks are called after the component mounts, they can be used for passing state from parents to children, but they should only be used when necessary. I got all that from the docs.</p>
  
  <p>I plan on modifying this script for my own purpose so understanding <code>this.mount</code> and the ref callback would be really helpful. TIA</p>