The react-threejs-good-cheap-fast's discuss from jonarnold

react-threejs-good-cheap-fast's Issues

Fix React Hook useEffect has a missing dependency

Hello!

Firstly, I want to thank you for your project, it helped me a lot with HDRi maps and glTF interaction.
Secondly, I can help you with fixing the errors in the highlighted linter, marked as React Hook useEffect has a missing dependency. Below is a fix for Environment.js:

import * as THREE from 'three'
import { useEffect } from 'react'
import { useThree, useLoader } from 'react-three-fiber'
import { HDRCubeTextureLoader } from 'three/examples/jsm/loaders/HDRCubeTextureLoader'

export default function Environment({ background = false }) {
  const { gl, scene } = useThree()
  const [cubeMap] = useLoader(HDRCubeTextureLoader, [['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr']], loader => {
    loader.setDataType(THREE.UnsignedByteType)
    loader.setPath('hdr/')
  })
  useEffect(() => {
    const gen = new THREE.PMREMGenerator(gl)
    gen.compileEquirectangularShader()
    const hdrCubeRenderTarget = gen.fromCubemap(cubeMap)
    cubeMap.dispose()
    gen.dispose()
    // if (background) scene.background = hdrCubeRenderTarget.texture
    scene.environment = hdrCubeRenderTarget.texture
    // scene.background.convertSRGBToLinear()
    return () => (scene.environment = null)
  }, [cubeMap, gl, scene])
  return null
}

If you are interested, here's an article that helped me refact this error:
https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array/

By analogy, you can correct that mistake anywhere.

Recommend Projects