chore: add useEffectEvent shim to bindings with react 19.2 dev dep (#1944)

### 💡 Overview

Adds the new useEffectEvent hook to the bindings from React 19.2 and
shim for older react

Author: santhoshvai

package.json

@@ -70,7 +70,7 @@
     "eslint": "^9.26.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^6.1.0",
     "globals": "^16.1.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.2",

packages/react-bindings/package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/video-client": "workspace:^",
-    "@types/react": "^19.1.3",
+    "@types/react": "^19.2.0",
     "react": "19.0.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.40.2",

packages/react-bindings/src/hooks/index.ts

@@ -1,5 +1,5 @@
 import * as CallStateHooks from './callStateHooks';
-
+export * from './useEffectEvent';
 export * from './useObservableValue';
 
 export * from './store';

packages/react-bindings/src/hooks/useEffectEvent.ts

@@ -0,0 +1,23 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useEffectEvent as BuiltInHook,
+} from 'react';
+
+function useEffectEventShim<T extends (...args: any[]) => any>(
+  cb: T,
+): (...funcArgs: Parameters<T>) => ReturnType<T> {
+  const cbRef = useRef(cb);
+
+  useLayoutEffect(() => {
+    cbRef.current = cb;
+  }, [cb]);
+
+  return useCallback((...args: Parameters<T>) => {
+    const callback = cbRef.current;
+    return callback(...args);
+  }, []);
+}
+
+export const useEffectEvent = BuiltInHook ?? useEffectEventShim;

packages/react-native-sdk/src/hooks/usePermissionNotification.tsx

@@ -1,8 +1,9 @@
 import { CallingState, OwnCapability } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Alert } from 'react-native';
 import { usePrevious } from '../utils/hooks/usePrevious';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
 
 export type PermissionNotificationProps = {
   /**
@@ -32,13 +33,13 @@ export const usePermissionNotification = (
   const previousHasPermission = usePrevious(hasPermission);
   const callingState = useCallCallingState();
 
-  const showGrantedNotification = useCallback(() => {
+  const showGrantedNotification = useEffectEvent(() => {
     Alert.alert(messageApproved);
-  }, [messageApproved]);
+  });
 
-  const showRevokedNotification = useCallback(() => {
+  const showRevokedNotification = useEffectEvent(() => {
     Alert.alert(messageRevoked);
-  }, [messageRevoked]);
+  });
 
   useEffect(() => {
     // Permission state is not reliable before the call is joined,
@@ -51,11 +52,5 @@ export const usePermissionNotification = (
     } else if (!hasPermission && previousHasPermission) {
       showRevokedNotification();
     }
-  }, [
-    callingState,
-    hasPermission,
-    previousHasPermission,
-    showGrantedNotification,
-    showRevokedNotification,
-  ]);
+  }, [callingState, hasPermission, previousHasPermission]);
 };

packages/react-sdk/src/hooks/useEffectEvent.ts

@@ -12,7 +12,7 @@ import {
   LivestreamLayoutProps,
   StreamCall,
 } from '../../core';
-import { useEffectEvent } from '../../hooks/useEffectEvent';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
 
 export type LivestreamPlayerProps = {
   /**
@@ -53,7 +53,7 @@ export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
   const { callType, callId, ...restProps } = props;
   const client = useStreamVideoClient();
   const [call, setCall] = useState<Call>();
-  const onError = useEffectEvent(props.onError);
+  const onError = useEffectEvent(props.onError ?? (() => {}));
 
   useEffect(() => {
     if (!client) return;
@@ -69,7 +69,7 @@ export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
       });
       setCall(undefined);
     };
-  }, [callId, callType, client, onError]);
+  }, [callId, callType, client]);
 
   if (!call) {
     return null;
@@ -116,7 +116,7 @@ const useLivestreamCall = (props: {
   const canJoin =
     (joinBehavior === 'asap' && canJoinAsap) ||
     (joinBehavior === 'live' && canJoinLive);
-  const onError = useEffectEvent(props.onError);
+  const onError = useEffectEvent(props.onError ?? (() => {}));
 
   useEffect(() => {
     if (call && call.state.callingState === CallingState.IDLE && canJoin) {
@@ -125,7 +125,7 @@ const useLivestreamCall = (props: {
         onError(e);
       });
     }
-  }, [call, canJoin, onError]);
+  }, [call, canJoin]);
 
   return call;
 };