Do not use useLastCallback for render* functions

This commit is contained in:
Alexander Zinchuk 2023-07-05 13:15:51 +02:00
parent b0e10bf2fb
commit b7b8feb07d
3 changed files with 31 additions and 22 deletions

View File

@ -46,8 +46,6 @@ const ChatForumLastMessage: FC<OwnProps> = ({
const lang = useLang();
const lastMessage = renderLastMessage();
const [lastActiveTopic, ...otherTopics] = useMemo(() => {
if (!chat.topics) {
return [];
@ -90,7 +88,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
setOverwrittenWidth(undefined);
}
setIsReversedCorner(lastMessageWidth > mainColumnWidth);
}, [lastActiveTopic, lastMessage]);
}, [lastActiveTopic, renderLastMessage]);
return (
<div
@ -153,7 +151,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
onClick={handleOpenTopicClick}
onMouseDown={handleOpenTopicMouseDown}
>
{lastMessage}
{renderLastMessage()}
{!overwrittenWidth && !isReversedCorner && (
<div className={styles.afterWrapper}>
<div className={styles.after} />

View File

@ -1,10 +1,13 @@
import React, { useLayoutEffect, useMemo, useRef } from '../../../../lib/teact/teact';
import React, {
useCallback, useLayoutEffect, useMemo, useRef,
} from '../../../../lib/teact/teact';
import { requestMutation } from '../../../../lib/fasterdom/fasterdom';
import { getGlobal } from '../../../../global';
import type { LangFn } from '../../../../hooks/useLang';
import useLang from '../../../../hooks/useLang';
import type {
ApiChat, ApiTopic, ApiMessage, ApiTypingStatus, ApiUser,
ApiChat, ApiMessage, ApiTopic, ApiTypingStatus, ApiUser,
} from '../../../../api/types';
import type { ObserveFn } from '../../../../hooks/useIntersectionObserver';
import type { Thread } from '../../../../global/types';
@ -14,13 +17,17 @@ import { renderTextWithEntities } from '../../../common/helpers/renderTextWithEn
import {
getMessageIsSpoiler,
getMessageMediaHash,
getMessageMediaThumbDataUri, getMessageRoundVideo,
getMessageSenderName, getMessageSticker, getMessageVideo, isActionMessage, isChatChannel,
getMessageMediaThumbDataUri,
getMessageRoundVideo,
getMessageSenderName,
getMessageSticker,
getMessageVideo,
isActionMessage,
isChatChannel,
} from '../../../../global/helpers';
import { renderActionMessageText } from '../../../common/helpers/renderActionMessageText';
import renderText from '../../../common/helpers/renderText';
import buildClassName from '../../../../util/buildClassName';
import useLang from '../../../../hooks/useLang';
import useEnsureMessage from '../../../../hooks/useEnsureMessage';
import useMedia from '../../../../hooks/useMedia';
import { ChatAnimationTypes } from './useChatAnimationType';
@ -28,7 +35,6 @@ import { ChatAnimationTypes } from './useChatAnimationType';
import MessageSummary from '../../../common/MessageSummary';
import ChatForumLastMessage from '../../../common/ChatForumLastMessage';
import TypingStatus from '../../../common/TypingStatus';
import useLastCallback from '../../../../hooks/useLastCallback';
const ANIMATION_DURATION = 200;
@ -90,7 +96,7 @@ export default function useChatListEntry({
return actionTargetUserIds.map((userId) => usersById[userId]).filter(Boolean);
}, [actionTargetUserIds]);
const renderLastMessageOrTyping = useLastCallback(() => {
const renderLastMessageOrTyping = useCallback(() => {
if (typingStatus && lastMessage && typingStatus.timestamp > lastMessage.date * 1000) {
return <TypingStatus typingStatus={typingStatus} />;
}
@ -148,7 +154,11 @@ export default function useChatListEntry({
{renderSummary(lang, lastMessage, observeIntersection, mediaBlobUrl || mediaThumbnail, isRoundVideo)}
</p>
);
});
}, [
actionTargetChatId, actionTargetMessage, actionTargetUsers, chat, chatId, draft, isAction,
isRoundVideo, isTopic, lang, lastMessage, lastMessageSender, lastMessageTopic, mediaBlobUrl, mediaThumbnail,
observeIntersection, typingStatus,
]);
function renderSubtitle() {
if (chat?.isForum && !isTopic) {

View File

@ -1,31 +1,29 @@
import type { FC } from '../../lib/teact/teact';
import React, {
memo, useEffect, useMemo, useRef,
memo, useCallback, useEffect, useMemo, useRef,
} from '../../lib/teact/teact';
import { getActions, getGlobal, withGlobal } from '../../global';
import type {
ApiUser, ApiMessage, ApiChat, ApiSticker, ApiTopic,
ApiChat, ApiMessage, ApiSticker, ApiTopic, ApiUser,
} from '../../api/types';
import type { FocusDirection } from '../../types';
import type { PinnedIntersectionChangedCallback } from './hooks/usePinnedMessage';
import type { MessageListType } from '../../global/types';
import {
selectUser,
selectCanPlayAnimatedEmojis,
selectChat,
selectChatMessage,
selectIsMessageFocused,
selectChat,
selectTopicFromMessage,
selectTabState,
selectCanPlayAnimatedEmojis,
selectTopicFromMessage,
selectUser,
} from '../../global/selectors';
import { getMessageHtmlId, isChatChannel } from '../../global/helpers';
import buildClassName from '../../util/buildClassName';
import { renderActionMessageText } from '../common/helpers/renderActionMessageText';
import { preventMessageInputBlur } from './helpers/preventMessageInputBlur';
import useLastCallback from '../../hooks/useLastCallback';
import useEnsureMessage from '../../hooks/useEnsureMessage';
import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
import type { ObserveFn } from '../../hooks/useIntersectionObserver';
@ -151,7 +149,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
: undefined;
}, [targetUserIds, usersById]);
const renderContent = useLastCallback(() => {
const renderContent = useCallback(() => {
return renderActionMessageText(
lang,
message,
@ -165,7 +163,10 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
observeIntersectionForLoading,
observeIntersectionForPlaying,
);
});
}, [
isEmbedded, lang, message, observeIntersectionForLoading, observeIntersectionForPlaying,
senderChat, senderUser, targetChatId, targetMessage, targetUsers, topic,
]);
const {
isContextMenuOpen, contextMenuPosition,