ReactでRemoveEventListnerが効かない

前提・実現したいこと

動画再生サイトを作成しております。
複数の動画を１つの画面で再生しており、メインで再生している動画が切り替わった際にメインで再生していた動画のEventを削除したいのですが、うまくいきません。
RemoveEventListnerを効かせるやり方を教えていただきたいです。

該当のソースコード

activeVideoIdにはランダムで生成したstring型のuuidが入っており、activeVideoIdでメインで再生している動画の判別をしています

    const [intervalId, setIntervalId] = useState(0);

    useEffect(() => {
        if (context.activeVideoId === props.video.uuid) {
            console.log("add");

            videoEle.addEventListener("play", playEvent);

            videoEle.addEventListener("ended", endedEvent);
        } else {
            console.log("remove");

            videoEle.removeEventListener("play", playEvent);

            videoEle.removeEventListener("ended", endedEvent);
        }
    }, [context.activeVideoId]);

    const playEvent = () => {
        let id = setInterval(() => {
            context.setFrame(videoEle.currentTime * context.fps);
            return () => clearInterval(id);
        }, context.fps);
        setIntervalId(id);
    };

    const endedEvent = () => {
        context.setIsPlay(false);
        pauseEvent();
    };

    const pauseEvent = () => {
        clearInterval(intervalId);
    };

試したこと

addEventListener、removeEventListnerの第三引数に false を設定

playEvent/endedEventを定数ではなく、functionで定義

捕捉

VideoEleにはdocument.createElement("video")で<video>要素を作成し、格納しています。

現象としてはメインではない動画が再生終了すると動画が止まってしまいます。
endedEventにconsole.logを追加し確認したところコンソールに表示されました。

maisumakun

2021/07/14 09:43

・videoEleはどのような変数ですか？・具体的にどのようなことが起きて、「うまくいかない」と判断しているのですか？

te_ff

2021/07/14 09:59

捕捉追記しました。よろしくお願いいたします

行動規範の内容に同意します

回答2件

自己解決

https://stackoverflow.com/questions/55360736/how-do-i-window-removeeventlistener-using-react-useeffect

useCallbackを利用し、useEffectのreturnでremoveEventListnerを返してあげることによりできました。

useEffect(() => {
    if (context.activeVideoId === props.video.uuid) {
        videoEle.addEventListener("ended", endedEvent);
    } else {
        videoEle.removeEventListener("ended", endedEvent);
    }
    return () => videoEle.removeEventListener("ended", endedEvent);
}, [context.activeVideoId]);

const endedEvent = useCallback(() => {
    context.setIsPlay(false);
});

投稿2021/07/15 05:20

te_ff

総合スコア13