Fix WebSocketProvider causing multiple renders
Memoize the `value` object in `WebSocketProvider` so that hooks that
depend on the `WebSocketContext` do not get called unecessarily.
Fix `CallBegin` being sent twice.
Change-Id: I12079322ae98e87ad0a9cc57dfb349604f1d82bf
diff --git a/client/src/contexts/WebSocketProvider.tsx b/client/src/contexts/WebSocketProvider.tsx
index 0d153dc..bb94524 100644
--- a/client/src/contexts/WebSocketProvider.tsx
+++ b/client/src/contexts/WebSocketProvider.tsx
@@ -16,7 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { WebSocketMessage, WebSocketMessageTable, WebSocketMessageType } from 'jami-web-common';
-import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { apiUrl } from '../utils/constants';
import { WithChildren } from '../utils/utils';
@@ -152,13 +152,14 @@
useEffect(connect, [connect]);
- const value: IWebSocketContext | undefined = isConnected
- ? {
- bind,
- unbind,
- send,
- }
- : undefined;
+ const value: IWebSocketContext = useMemo(
+ () => ({
+ bind,
+ unbind,
+ send,
+ }),
+ [bind, unbind, send]
+ );
- return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>;
+ return <WebSocketContext.Provider value={isConnected ? value : undefined}>{children}</WebSocketContext.Provider>;
};