React hooks, how to fire some logic once when component unmounts - reactjs

Question

I'm playing with hooks now. My code looks like that:
import React, { Fragment, useState, useEffect, useRef } from 'react';
import ReactPlayer from 'react-player';
import storage from '../../utils/localStorage';
const STORAGE_VIDEOS_DATA_KEY = 'VIDEOS_DATA';
const VideoItem = () => {
const [ playingStatus, setPlayingStatus ] = useState(false);
const [ videoId ] = useState(318298217);
const [ videoProgress, setVideoProgress ] = useState(0);
const player = useRef();
useEffect(() => {
window.addEventListener(
'beforeunload',
saveStateToLocalStorage
);
return () => {
window.removeEventListener(
'beforeunload',
saveStateToLocalStorage
);
saveStateToLocalStorage(); // this needs to be fired only once when component onmounts but clearing effect is done every time videoProgress changes
};
}, [videoProgress]);
const onVideoEnd = () => {
console.log('backend call - video end status');
};
const seekToPoint = () => {
const videosData = storage.hasKey(STORAGE_VIDEOS_DATA_KEY) &&
JSON.parse(storage.getItem(STORAGE_VIDEOS_DATA_KEY));
const toReturnVideoPoint = videosData[videoId] || 0;
player.current.seekTo(Number(toReturnVideoPoint));
};
const saveStateToLocalStorage = () => {
const videosPlayedDuration = {
[videoId]: videoProgress,
};
storage.setItem(STORAGE_VIDEOS_DATA_KEY, JSON.stringify(videosPlayedDuration));
};
return (
<Fragment>
<ReactPlayer
ref={player}
playing={playingStatus}
url={`https://player.vimeo.com/video/${videoId}`}
onPause={() => {
saveStateToLocalStorage();
setPlayingStatus(false);
}}
onEnded={onVideoEnd}
onProgress={progress => setVideoProgress(progress.playedSeconds)}
/>
<button onClick={() => {
seekToPoint();
setPlayingStatus(true);
}}
>
GO BACK TO THE PREVIOUS POINT
</button>
</Fragment>
);
};
export default VideoItem;
I want to clear my effect only when component unmounts, not everytime component gets rerendered when videoProgress piece of state changes. I could just use empty array instead of [ videoProgress ] but then videoProgress in method saveStateToLocalStorage won't get updated and onPause method won't cause a proper saving to localStorage (it will save 0). Is there a way to do that with hooks and not using class component with componentWillUnmount lifecycle?

Answer 1

You have to understand how useEffect works.
useEffect(() => {
// your code
return () => {
// your clearup code
};
}, [videoProgress]); // => This is the key point. It's called dependency
Whenever the dependency gets changed, react re-run the useEffect. Your videoProgress value gets changes after time interval (may be after 1 sec, I don't know). That's why react re-run the useEffect.
You can do this.
useEffect(() => {
// your code
return () => {
// your clearup code. =>> This block will work as componentWillUnmount
};
}, []); // => No Dependency
Or you can add dependency of your video id (as per your requirements).
One Handy example
useEffect(() => {
// This block (before the return) will act as componentDidMount
return () => {
// This block will work as componentWillUnmount
};
}, []); // => beacase of No Dependency
One Side note: You can have multiple useEffect.