React.jsで複数個の動画をstateで管理する方法を知りたい

Question

前提・実現したいこと

ReactでVideo.jsを利用し複数動画を一括で再生できるサイトを制作しています。
一つの再生/停止ボタンで複数の動画を再生/停止できるようにしたいのですが、プレイヤーコンポーネントでuseEffectをすると無限ループし、うまくstateで管理できません。
原因はuseEffectがstate変更時に走るためだとは思うのですが、どのようにすれば管理できるのでしょうか？

該当のソースコード

//子コンポーネント
[VideoPlayer.js]
import React, { useRef, useEffect, useState } from "react"
import videojs from 'video.js'
import "video.js/dist/video-js.css"

export const VideoPlayer = (props) => {

    const options = {
        autoplay: false, // 自動再生
        loop: false, // ループ再生
        controls: false, // コントロール制御表示
        preload: 'auto', // 読み込み制御
        // poster: '../video/thumb.png', // サムネイル表示
        sources: [{
            src: 'http://localhost:8000/videos/99/162/126.mp4',
            type: 'video/mp4'
        }],
    };

    const playerRef = useRef();

    useEffect(() => {
        // ここで無限ループがはしる
        props.setPlayer([...props.player, videojs(playerRef.current, options)]);
        console.log(props.player);
    }, [props.player]);

    return(
        <div>
            <video ref={playerRef} />
        </div>
    )
}

//親コンポーネント
[VideoContent.js]
import React, { Fragment, useState } from 'react';
import { VideoPlayer } from './VideoPlayer'

import classes from  '../css/VideoContent.module.css'

export const VideoContent = (props) => {

    const [player, setPlayer] = useState([]);
    const [isPlay, setIsPlay] = useState();

    const renderVideo = () => {
        return props.video.map( v => (
            <VideoPlayer key={v.id} setPlayer={setPlayer} player={player} />
        ))
    }

    const handleChange = () => {
        if(isPlay){
            player.map(p => p.pause());
        }
        else{
            player.map(p => p.pause());
        }
        console.log(player)
        setIsPlay(!isPlay);
    }

    return(
        <>
            <div className={classes.hoge}>
                {renderVideo()}
                <button onClick={() => handleChange()}>再生/停止</button>
            </div>
        </>
    )
}

試したこと

useEffectの第二引数なしでも結果変わりませんでした。

    useEffect(() => {
        // ここで無限ループがはしる
        props.setPlayer([...props.player, videojs(playerRef.current, options)]);
        console.log(props.player);
    });

Answer 1

https://qiita.com/wafuwafu13/items/0f4230a5301fb44dd796
空配列を指定することによりマウント時のみ第１引数の関数が実行されるようになるみたいです。

useEffect(() => {
    props.setPlayer([...props.player, videojs(playerRef.current, options)]);
}, []);