Fix components rerendering unnecessarily
Before, some providers (WebRtcProvider, CallProvider...) were rendered conditionally.
This was causing all their children to re-render when the provider rendered.
Instead of using conditional rendering, these providers now use `ConditionalContextProvider`.
It always renders the provider, but sets its value to `initialValue` if the dependencies are not all defined.
If all dependencies are defined, the value is the result of the `useProviderValue` hook.
Changes:
- New file: `ConditionalContextProvider`
- New file: `HookComponent` - Component that calls a hook when mounted and calls a `callback` function with the hook result as argument
- For `WebRtcProvider` and `CallProvider`, use `createOptionalContext` to create the context and `ConditionalContextProvider` to provide their value only when the conditions are met
- In `WebRtcProvider`, set the webRtcConnection to undefined when not in a call
- For all providers, wrap their `value` prop in `useMemo` to avoid unnecessary rerenders
Change-Id: Ide947e216d54599aabc71cf4bd026bd20d6e0daf
diff --git a/client/src/contexts/ConversationProvider.tsx b/client/src/contexts/ConversationProvider.tsx
index e2aa4bc..8488feb 100644
--- a/client/src/contexts/ConversationProvider.tsx
+++ b/client/src/contexts/ConversationProvider.tsx
@@ -16,7 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { ConversationView, WebSocketMessageType } from 'jami-web-common';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
import LoadingPage from '../components/Loading';
import { createOptionalContext } from '../hooks/createOptionalContext';
@@ -58,21 +58,23 @@
webSocket.send(WebSocketMessageType.ConversationView, conversationView);
}, [accountId, conversation, conversationId, webSocket]);
+ const value = useMemo(() => {
+ if (!conversation || !conversationId) {
+ return;
+ }
+
+ return {
+ conversationId,
+ conversation,
+ };
+ }, [conversationId, conversation]);
+
if (isLoading) {
return <LoadingPage />;
}
- if (isError || !conversation || !conversationId) {
+ if (isError || !value) {
return <div>Error loading conversation: {conversationId}</div>;
}
- return (
- <ConversationContext.Provider
- value={{
- conversationId,
- conversation,
- }}
- >
- {children}
- </ConversationContext.Provider>
- );
+ return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>;
};