fix: attach and remove screenful listener on every side effect instead of the first mount

Author: Emiliano-Bucci

example/.eslintcache

@@ -1 +1 @@
-[{"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx":"1","/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx":"2"},{"size":164,"mtime":1607363608058,"results":"3","hashOfConfig":"4"},{"size":4894,"mtime":1612209545613,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"bpxiyg",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx",[],["11","12"],"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx":"1","/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx":"2"},{"size":164,"mtime":1607363608058,"results":"3","hashOfConfig":"4"},{"size":4904,"mtime":1612255022820,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"bpxiyg",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx",[],["11","12"],"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]

example/src/App.tsx

@@ -205,8 +205,8 @@ const App = () => {
     }
   })
 
-  useListenToCustomEvent('onSlideChange', (data) => {
-    console.log('slide change!', data)
+  useListenToCustomEvent('onFullscreenChange', (data) => {
+    console.log('onFullscreenChange', data)
   })
 
   return (

src/modules/useFullscreenModule.tsx

@@ -1,5 +1,5 @@
-import { useRef, MutableRefObject } from 'react'
-import { prepareDataForCustomEvent, useMount } from '../index.utils'
+import { useRef, MutableRefObject, useEffect } from 'react'
+import { prepareDataForCustomEvent } from '../index.utils'
 import screenfull from 'screenfull'
 import { EmitCustomEvent, OnFullscreenChange } from '..'
 
@@ -16,7 +16,8 @@ export function useFullscreenModule({
 }: FullscreenModule) {
   const isFullscreen = useRef(false)
 
-  useMount(() => {
+  // @ts-ignore
+  useEffect(() => {
     function handleFullscreenChange() {
       if (document.fullscreenElement) {
         setIsFullscreen(true)
@@ -51,8 +52,6 @@ export function useFullscreenModule({
         }
       }
     }
-
-    return () => {}
   })
 
   function setIsFullscreen(_isFullscreen: boolean) {