CompositionInput: Fix high CPU usage
This commit is contained in:
parent
a1270867ff
commit
17f212ffcf
|
@ -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(
|
||||
|
|
|
@ -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>>) {
|
||||
return (t: T) => {
|
||||
refs.forEach(r => {
|
||||
if (isFunction(r)) {
|
||||
r(t);
|
||||
} else if (r) {
|
||||
// @ts-ignore: React's typings for ref objects is annoying
|
||||
r.current = t;
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
export const createRefMerger = () =>
|
||||
memoizee(
|
||||
<T>(...refs: Array<Ref<T>>) => {
|
||||
return (t: T) => {
|
||||
refs.forEach(r => {
|
||||
if (isFunction(r)) {
|
||||
r(t);
|
||||
} else if (r) {
|
||||
// @ts-ignore: React's typings for ref objects is annoying
|
||||
r.current = t;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
{ length: false, max: 1 }
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue