Optimize rendering

ts/components/conversationList/StartNewConversation.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { CSSProperties, FunctionComponent } from 'react';
+import React, { FunctionComponent, useCallback } from 'react';
 
 import {
   BaseConversationListItem,
@@ -19,18 +19,21 @@ type PropsData = {
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
-  style: CSSProperties;
-  onClick: () => void;
+  onClick: (phoneNumber: string) => void;
 };
 
 export type Props = PropsData & PropsHousekeeping;
 
 export const StartNewConversation: FunctionComponent<Props> = React.memo(
-  ({ i18n, onClick, phoneNumber, style }) => {
+  ({ i18n, onClick, phoneNumber }) => {
     const messageText = (
       <div className={TEXT_CLASS_NAME}>{i18n('startConversation')}</div>
     );
 
+    const boundOnClick = useCallback(() => {
+      onClick(phoneNumber);
+    }, [onClick, phoneNumber]);
+
     return (
       <BaseConversationListItem
         acceptedMessageRequest={false}
@@ -41,10 +44,9 @@ export const StartNewConversation: FunctionComponent<Props> = React.memo(
         isMe={false}
         isSelected={false}
         messageText={messageText}
-        onClick={onClick}
+        onClick={boundOnClick}
         phoneNumber={phoneNumber}
         sharedGroupNames={[]}
-        style={style}
         title={phoneNumber}
       />
     );