render render count

packages/desktop/src/components/ConversationDetails.tsx

@@ -19,12 +19,16 @@ import {
 } from '@mui/material';
 import { FiSun, FiMoreVertical, FiPlay, FiCloudRain } from 'react-icons/fi';
 import ConversationLabel from '../subcomponents/ConversationLabel';
+import { useRendersCount } from 'react-use';
 
 export default function ConversationDetails() {
   const { user } = useAuth();
   const { getUser, selectedConversation, selectConversation, isCloudDoingMagic } = useTerminal();
   const [conversationUsers, setConversationUsers] = useImmer<User[]>([]);
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | CONVERSATION DETAILS | ', rendersCount);
+
   // TODO: at the terminal level, make sure we are listening for audio clips
   // and here it's just an access of that map of content for each conversation's blocks
 

packages/desktop/src/components/ConversationList.tsx

@@ -23,7 +23,7 @@ import {
 import { blueGrey } from '@mui/material/colors';
 import { FiActivity, FiInbox, FiSearch, FiUsers, FiCoffee, FiCircle } from 'react-icons/fi';
 import NirvanaAvatar from './NirvanaAvatar';
-import { useDebounce, useKey } from 'react-use';
+import { useDebounce, useKey, useRendersCount } from 'react-use';
 import { useSnackbar } from 'notistack';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { searchUsers } from '../firebase/firestore';
@@ -42,6 +42,9 @@ import ConversationLabel from '../subcomponents/ConversationLabel';
 export function ConversationList({ lookingForSomeone = false }: { lookingForSomeone: boolean }) {
   const { conversationMap } = useTerminal();
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | CONVERSATION LIST | ', rendersCount);
+
   if (Object.keys(conversationMap).length === 0) {
     return (
       <Typography align="center" variant="caption">
@@ -93,6 +96,9 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
 
   const [conversationUsers, setConversationUsers] = useImmer<User[]>([]);
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | CONVERSATION LIST ROW | ', rendersCount);
+
   useEffect(() => {
     (async () => {
       const userPromises = conversation.memberIdsList

packages/desktop/src/components/MainPanel.tsx

@@ -5,6 +5,8 @@ import useAuth from '../providers/AuthProvider';
 import ConversationDetails from './ConversationDetails';
 import useTerminal from './Terminal';
 
+import { useRendersCount } from 'react-use';
+
 export default function MainPanel() {
   const { user } = useAuth();
   const { selectedConversation, createConversationMode } = useTerminal();
@@ -15,6 +17,9 @@ export default function MainPanel() {
 
   // show who is
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | MAINPANEL | ', rendersCount);
+
   const pageContent = useMemo(() => {
     if (selectedConversation) return <ConversationDetails />;
 

packages/desktop/src/components/Navbar.tsx

@@ -20,7 +20,7 @@ import useAuth from '../providers/AuthProvider';
 import { blueGrey } from '@mui/material/colors';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { useSnackbar } from 'notistack';
-import { useKeyPressEvent } from 'react-use';
+import { useKeyPressEvent, useRendersCount } from 'react-use';
 import useTerminal from './Terminal';
 
 const Navbar = ({
@@ -44,6 +44,9 @@ const Navbar = ({
 
   useKeyPressEvent('Shift', onSearchFocus);
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | NAVBAR | ', rendersCount);
+
   return (
     <Stack
       direction="row"

packages/desktop/src/components/Terminal.tsx

@@ -40,7 +40,7 @@ import { useImmer } from 'use-immer';
 import { User } from '@nirvana/core/src/models/user.model';
 import { onSnapshot, Unsubscribe } from 'firebase/firestore';
 
-import { useDebounce, useKeyPressEvent, useUnmount } from 'react-use';
+import { useDebounce, useKeyPressEvent, useRendersCount, useUnmount } from 'react-use';
 
 import { uploadAudioClip } from '../firebase/firebaseStorage';
 import { ContentBlock, ContentType } from '@nirvana/core/src/models/content.model';
@@ -508,6 +508,9 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     setCreateConversationMode(true);
   }, [setCreateConversationMode, setSelectedConversationId]);
 
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | TERMINAL | ', rendersCount);
+
   return (
     <TerminalContext.Provider
       value={{