CompositionInput: Fix high CPU usage

ts/components/CompositionInput.tsx

@@ -27,7 +27,7 @@ import {
   search,
 } from './emoji/lib';
 import { LocalizerType } from '../types/Util';
-import { mergeRefs } from './_util';
+import { createRefMerger } from './_util';
 
 const MAX_LENGTH = 64 * 1024;
 const colonsRegex = /(?:^|\s):[a-z0-9-_+]+:?/gi;
@@ -237,6 +237,7 @@ export const CompositionInput = ({
   const focusRef = React.useRef(false);
   const editorStateRef = React.useRef<EditorState>(editorRenderState);
   const rootElRef = React.useRef<HTMLDivElement>();
+  const rootElRefMerger = React.useMemo(createRefMerger, []);
 
   // This function sets editorState and also keeps a reference to the newly set
   // state so we can reference the state in effects and callbacks without
@@ -757,7 +758,7 @@ export const CompositionInput = ({
             {({ measureRef }) => (
               <div
                 className="module-composition-input__input"
-                ref={mergeRefs(popperRef, measureRef, rootElRef)}
+                ref={rootElRefMerger(popperRef, measureRef, rootElRef)}
               >
                 <div
                   className={classNames(

ts/components/_util.ts

@@ -2,20 +2,25 @@
 
 import { Ref } from 'react';
 import { isFunction } from 'lodash';
+import memoizee from 'memoizee';
 
 export function cleanId(id: string): string {
   return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
 }
 
-export function mergeRefs<T>(...refs: Array<Ref<T>>) {
+export const createRefMerger = () =>
-  return (t: T) => {
+  memoizee(
-    refs.forEach(r => {
+    <T>(...refs: Array<Ref<T>>) => {
-      if (isFunction(r)) {
+      return (t: T) => {
-        r(t);
+        refs.forEach(r => {
-      } else if (r) {
+          if (isFunction(r)) {
-        // @ts-ignore: React's typings for ref objects is annoying
+            r(t);
-        r.current = t;
+          } else if (r) {
-      }
+            // @ts-ignore: React's typings for ref objects is annoying
-    });
+            r.current = t;
-  };
+          }
-}
+        });
+      };
+    },
+    { length: false, max: 1 }
+  );

ts/components/conversation/Message.tsx

@@ -40,7 +40,7 @@ import { ContactType } from '../../types/Contact';
 import { getIncrement } from '../../util/timer';
 import { isFileDangerous } from '../../util/isFileDangerous';
 import { ColorType, LocalizerType } from '../../types/Util';
-import { mergeRefs } from '../_util';
+import { createRefMerger } from '../_util';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 
 interface Trigger {
@@ -181,6 +181,7 @@ export class Message extends React.PureComponent<Props, State> {
   public reactionsContainerRef: React.RefObject<
     HTMLDivElement
   > = React.createRef();
+  public reactionsContainerRefMerger = createRefMerger();
 
   public wideMl: MediaQueryList;
 
@@ -1572,7 +1573,10 @@ export class Message extends React.PureComponent<Props, State> {
         <Reference>
           {({ ref: popperRef }) => (
             <div
-              ref={mergeRefs(this.reactionsContainerRef, popperRef)}
+              ref={this.reactionsContainerRefMerger(
+                this.reactionsContainerRef,
+                popperRef
+              )}
               className={classNames(
                 'module-message__reactions',
                 outgoing