Reaccionar gancho, ComponentDidMount [duplicado]

Question

En el documento oficial de video.js https://docs.videojs.com/tutorial-react.html

tenemos

  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

Quiero crear un componente funcional con ganchos.

export default function VideoPlayer(props) {
  const player = useRef(null);
  const videoNode = useRef(null);
  useEffect(() => {
    player.current = videojs(videoNode.current, props);

    return () => {
      if (player.current) {
        player.current.dispose()
      }
    }
  }, []);//I have problem with dependency array
  return (
    <div data-vjs-player>
      <video ref={videoNode} className="video-js"/>
    </div>
  )
}

Tengo una advertencia

ESLint: React Hook useEffect tiene una dependencia faltante: 'props'. Inclúyalo o elimine la matriz de dependencia. (React-hooks / exhaustive-deps)

Si cambio la matriz de dependencia de []a se [props] useEffectejecuta en cada render, solo quiero ejecutarla la primera vez, comocomponentDidMount

¿Cómo puedo crear exactamente componentDidMountusando ganchos?

Answer 1

Como se explica aquí , usó useEffectsegún lo previsto. Una matriz de dependencia vacía significa que se ejecutará solo una vez (como componentDidMount). El error señalado le informa si realmente tenía otras intenciones, el efecto no se volverá a generar.

Para descartar el error, simplemente pegue el siguiente comentario // eslint-disable-line react-hooks/exhaustive-depsal final deuseEffect

useEffect(() => {
  player.current = videojs(videoNode.current, props);

  return () => {
    if (player.current) {
      player.current.dispose()
    }
  }
}, []); // eslint-disable-line react-hooks/exhaustive-deps

REFERENCIA

Esta respuesta lo explica más a fondo.