diff --git a/shared/js/ui/react-elements/internal-modal/Renderer.tsx b/shared/js/ui/react-elements/internal-modal/Renderer.tsx index 24584331..59a882cf 100644 --- a/shared/js/ui/react-elements/internal-modal/Renderer.tsx +++ b/shared/js/ui/react-elements/internal-modal/Renderer.tsx @@ -2,10 +2,11 @@ import * as React from "react"; import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions"; import {ClientIcon} from "svg-sprites/client-icons"; import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary"; +import {useMemo} from "react"; const cssStyle = require("./Modal.scss"); -export const InternalModalContentRenderer = (props: { +export const InternalModalContentRenderer = React.memo((props: { modal: AbstractModal, onClose?: () => void, @@ -18,6 +19,9 @@ export const InternalModalContentRenderer = (props: { refContent?: React.Ref }) => { + const body = useMemo(() => props.modal.renderBody(), [props.modal]); + const title = useMemo(() => props.modal.renderTitle(), [props.modal]); + return (
@@ -26,7 +30,7 @@ export const InternalModalContentRenderer = (props: {
- {props.modal.title()} + {title}
{!props.onMinimize ? undefined : ( @@ -42,12 +46,12 @@ export const InternalModalContentRenderer = (props: {
- {props.modal.renderBody()} + {body}
); -}; +}); export class InternalModalRenderer extends React.PureComponent<{ modal: AbstractModal, onClose: () => void }, { show: boolean }> { private readonly refModal = React.createRef();