fix(react): strict mode support (#742)

packages/react/src/ui/hooks/use-slider.ts

@@ -10,7 +10,8 @@ import {
 } from '@videojs/core/dom';
 import { useSnapshot } from '@videojs/store/react';
 import { isRTL } from '@videojs/utils/dom';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useDestroy } from '../../utils/use-destroy';
 import { useForceRender } from '../../utils/use-force-render';
 import { useLatestRef } from '../../utils/use-latest-ref';
 
@@ -82,8 +83,7 @@ export function useSlider<State extends SliderState = SliderState>(
     return createSlider(stableOptions);
   });
 
-  // Cleanup on unmount.
-  useEffect(() => () => slider.destroy(), [slider]);
+  useDestroy(slider);
 
   // Subscribe to slider input state.
   const input = useSnapshot(slider.input);

packages/react/src/ui/popover/popover-root.tsx

@@ -6,6 +6,7 @@ import { useSnapshot } from '@videojs/store/react';
 import type { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 
+import { useDestroy } from '../../utils/use-destroy';
 import { useLatestRef } from '../../utils/use-latest-ref';
 import { useSafeId } from '../../utils/use-safe-id';
 import { PopoverContextProvider } from './context';
@@ -85,8 +86,7 @@ export function PopoverRoot({
     }
   }, [controlledOpen, popover]);
 
-  // Cleanup on unmount
-  useEffect(() => () => popover.destroy(), [popover]);
+  useDestroy(popover);
 
   const input = useSnapshot(popover.input);
   core.setInput(input);

packages/react/src/ui/thumbnail/thumbnail.tsx

@@ -9,10 +9,11 @@ import {
 } from '@videojs/core';
 import { createThumbnail, selectTextTrack } from '@videojs/core/dom';
 import type { CSSProperties } from 'react';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 
 import { useOptionalPlayer } from '../../player/context';
 import type { UIComponentProps } from '../../utils/types';
+import { useDestroy } from '../../utils/use-destroy';
 import { renderElement } from '../../utils/use-render';
 
 export interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {
@@ -49,10 +50,7 @@ export const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thu
     })
   );
 
-  useEffect(() => {
-    handle.connect();
-    return () => handle.destroy();
-  }, [handle]);
+  useDestroy(handle, () => handle.connect());
 
   // Resolve thumbnails: external prop takes priority over auto <track> path.
   const thumbnails = useMemo(() => {