feat(react): implement default and minimal video skins (#550)

packages/react/src/utils/types.ts

@@ -6,7 +6,7 @@ export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
 };
 
 /** Render function signature - receives props and state, returns element. */
-export type RenderFunction<Props, State> = (props: Props, state: State) => ReactElement;
+export type RenderFunction<Props, State> = (props: Props, state: State) => ReactElement | null;
 
 /** Render prop - either a React element or a render function. */
 export type RenderProp<State> = ReactElement | RenderFunction<HTMLProps, State>;

packages/react/src/utils/use-composed-refs.ts

@@ -37,16 +37,20 @@ export function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]):
   return (node): (() => void) | void => {
     const cleanups = flatRefs.map((ref) => setRef(ref, node));
 
-    return () => {
-      for (let i = 0; i < cleanups.length; i++) {
-        const cleanup = cleanups[i];
-        if (isFunction(cleanup)) {
-          cleanup();
-        } else {
-          setRef(flatRefs[i], null);
+    // Only return cleanup if any refs returned one (React 19+).
+    // React 18 handles cleanup by calling the ref callback with null.
+    if (cleanups.some(isFunction)) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (isFunction(cleanup)) {
+            cleanup();
+          } else {
+            setRef(flatRefs[i], null);
+          }
         }
-      }
-    };
+      };
+    }
   };
 }