Skip to content
Merged
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"type": "patch",
"area": "fix",
"workstream": "Calls",
"comment": "update useAdapted selector to always use the up to date callId",
"packageName": "@azure/communication-react",
"email": "dmceachern@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"type": "patch",
"area": "fix",
"workstream": "Calls",
"comment": "update useAdapted selector to always use the up to date callId",
"packageName": "@azure/communication-react",
"email": "dmceachern@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

/* eslint-disable @typescript-eslint/no-explicit-any */

import { useState, useEffect, useRef, useMemo } from 'react';
import { useState, useEffect, useRef } from 'react';

import memoizeOne from 'memoize-one';
import { useAdapter } from '../adapter/CallAdapterProvider';
Expand Down Expand Up @@ -52,14 +52,8 @@ export const useSelectorWithAdaptation = <
});

const callId = adapter.getState().call?.id;
const callConfigProps = useMemo(
() => ({
callId
}),
[callId]
);

const [props, setProps] = useState(selector(adaptState(adapter.getState()), selectorProps ?? callConfigProps));
const [props, setProps] = useState(selector(adaptState(adapter.getState()), selectorProps ?? { callId }));
const propRef = useRef(props);
propRef.current = props;

Expand All @@ -68,7 +62,7 @@ export const useSelectorWithAdaptation = <
if (!mounted.current) {
return;
}
const newProps = selector(adaptState(state), selectorProps ?? callConfigProps);
const newProps = selector(adaptState(state), selectorProps ?? { callId: state.call?.id });
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume it's ok { callId: state.call?.id } will be a new object each time selector is called, but perhaps we should check that selector from reselect doesn't require the props to be memoized

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at their docs for create selector it does not seem that they need anything to be memoized. they have lots of options to memoize the selector though
https://reselect.js.org/api/createSelector

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just verified this, put a console log inside the if (propRef.current !== newProps) { (and one in an else to that) and validate there is no difference if a cached { callId } is used vs creating the callId object each pass 👍

if (propRef.current !== newProps) {
setProps(newProps);
}
Expand All @@ -77,7 +71,7 @@ export const useSelectorWithAdaptation = <
return () => {
adapter.offStateChange(onStateChange);
};
}, [adaptState, adapter, selector, selectorProps, callConfigProps]);
}, [adaptState, adapter, selector, selectorProps]);
return props;
};

Expand Down