5.10. Добавит новый хук useElementListener

Компонент `AudioPlayer` можно оптимизировать. Для этого вынесем логику
добавления и удаления событий на элемент `<audio>` в новый хук useElementListener.

src/components/audio-player/audio-player.tsx

@@ -1,5 +1,6 @@
 import {Fragment, useState, useEffect, useRef} from 'react';
 import cn from 'classnames';
+import {useElementListener} from '../../hooks/use-element-listener';
 
 type AudioPlayerProps = {
   isPlaying: boolean;
@@ -16,19 +17,7 @@ function AudioPlayer({isPlaying, src, onPlayButtonClick}: AudioPlayerProps): JSX
     setIsLoaded(true);
   };
 
-  useEffect(() => {
-    const playerElement = audioRef.current;
-
-    if (!playerElement) {
-      return;
-    }
-
-    playerElement.addEventListener('loadeddata', handleDataLoaded);
-
-    return () => {
-      playerElement.removeEventListener('loadeddata', handleDataLoaded);
-    };
-  }, []);
+  useElementListener('loadeddata', audioRef, handleDataLoaded);
 
   useEffect(() => {
     const playerElement = audioRef.current;

src/hooks/use-element-listener.ts

@@ -0,0 +1,22 @@
+import {RefObject, useEffect} from 'react';
+
+export const useElementListener = (
+  eventName: string,
+  element: RefObject<HTMLElement>,
+  listener: (evt: Event) => void
+) => {
+
+  useEffect(() => {
+    const domElement = element.current;
+
+    if (!domElement) {
+      return;
+    }
+
+    domElement.addEventListener(eventName, listener);
+
+    return () => {
+      domElement.removeEventListener(eventName, listener);
+    };
+  }, [eventName, element, listener]);
+};