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 lang = useLang();
const lastMessage = renderLastMessage();
const [lastActiveTopic, ...otherTopics] = useMemo(() => { const [lastActiveTopic, ...otherTopics] = useMemo(() => {
if (!chat.topics) { if (!chat.topics) {
return []; return [];
@ -90,7 +88,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
setOverwrittenWidth(undefined); setOverwrittenWidth(undefined);
} }
setIsReversedCorner(lastMessageWidth > mainColumnWidth); setIsReversedCorner(lastMessageWidth > mainColumnWidth);
}, [lastActiveTopic, lastMessage]); }, [lastActiveTopic, renderLastMessage]);
return ( return (
<div <div
@ -153,7 +151,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
onClick={handleOpenTopicClick} onClick={handleOpenTopicClick}
onMouseDown={handleOpenTopicMouseDown} onMouseDown={handleOpenTopicMouseDown}
> >
{lastMessage} {renderLastMessage()}
{!overwrittenWidth && !isReversedCorner && ( {!overwrittenWidth && !isReversedCorner && (
<div className={styles.afterWrapper}> <div className={styles.afterWrapper}>
<div className={styles.after} /> <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 { requestMutation } from '../../../../lib/fasterdom/fasterdom';
import { getGlobal } from '../../../../global'; import { getGlobal } from '../../../../global';
import type { LangFn } from '../../../../hooks/useLang'; import type { LangFn } from '../../../../hooks/useLang';
import useLang from '../../../../hooks/useLang';
import type { import type {
ApiChat, ApiTopic, ApiMessage, ApiTypingStatus, ApiUser, ApiChat, ApiMessage, ApiTopic, ApiTypingStatus, ApiUser,
} from '../../../../api/types'; } from '../../../../api/types';
import type { ObserveFn } from '../../../../hooks/useIntersectionObserver'; import type { ObserveFn } from '../../../../hooks/useIntersectionObserver';
import type { Thread } from '../../../../global/types'; import type { Thread } from '../../../../global/types';
@ -14,13 +17,17 @@ import { renderTextWithEntities } from '../../../common/helpers/renderTextWithEn
import { import {
getMessageIsSpoiler, getMessageIsSpoiler,
getMessageMediaHash, getMessageMediaHash,
getMessageMediaThumbDataUri, getMessageRoundVideo, getMessageMediaThumbDataUri,
getMessageSenderName, getMessageSticker, getMessageVideo, isActionMessage, isChatChannel, getMessageRoundVideo,
getMessageSenderName,
getMessageSticker,
getMessageVideo,
isActionMessage,
isChatChannel,
} from '../../../../global/helpers'; } from '../../../../global/helpers';
import { renderActionMessageText } from '../../../common/helpers/renderActionMessageText'; import { renderActionMessageText } from '../../../common/helpers/renderActionMessageText';
import renderText from '../../../common/helpers/renderText'; import renderText from '../../../common/helpers/renderText';
import buildClassName from '../../../../util/buildClassName'; import buildClassName from '../../../../util/buildClassName';
import useLang from '../../../../hooks/useLang';
import useEnsureMessage from '../../../../hooks/useEnsureMessage'; import useEnsureMessage from '../../../../hooks/useEnsureMessage';
import useMedia from '../../../../hooks/useMedia'; import useMedia from '../../../../hooks/useMedia';
import { ChatAnimationTypes } from './useChatAnimationType'; import { ChatAnimationTypes } from './useChatAnimationType';
@ -28,7 +35,6 @@ import { ChatAnimationTypes } from './useChatAnimationType';
import MessageSummary from '../../../common/MessageSummary'; import MessageSummary from '../../../common/MessageSummary';
import ChatForumLastMessage from '../../../common/ChatForumLastMessage'; import ChatForumLastMessage from '../../../common/ChatForumLastMessage';
import TypingStatus from '../../../common/TypingStatus'; import TypingStatus from '../../../common/TypingStatus';
import useLastCallback from '../../../../hooks/useLastCallback';
const ANIMATION_DURATION = 200; const ANIMATION_DURATION = 200;
@ -90,7 +96,7 @@ export default function useChatListEntry({
return actionTargetUserIds.map((userId) => usersById[userId]).filter(Boolean); return actionTargetUserIds.map((userId) => usersById[userId]).filter(Boolean);
}, [actionTargetUserIds]); }, [actionTargetUserIds]);
const renderLastMessageOrTyping = useLastCallback(() => { const renderLastMessageOrTyping = useCallback(() => {
if (typingStatus && lastMessage && typingStatus.timestamp > lastMessage.date * 1000) { if (typingStatus && lastMessage && typingStatus.timestamp > lastMessage.date * 1000) {
return <TypingStatus typingStatus={typingStatus} />; return <TypingStatus typingStatus={typingStatus} />;
} }
@ -148,7 +154,11 @@ export default function useChatListEntry({
{renderSummary(lang, lastMessage, observeIntersection, mediaBlobUrl || mediaThumbnail, isRoundVideo)} {renderSummary(lang, lastMessage, observeIntersection, mediaBlobUrl || mediaThumbnail, isRoundVideo)}
</p> </p>
); );
}); }, [
actionTargetChatId, actionTargetMessage, actionTargetUsers, chat, chatId, draft, isAction,
isRoundVideo, isTopic, lang, lastMessage, lastMessageSender, lastMessageTopic, mediaBlobUrl, mediaThumbnail,
observeIntersection, typingStatus,
]);
function renderSubtitle() { function renderSubtitle() {
if (chat?.isForum && !isTopic) { if (chat?.isForum && !isTopic) {

View File

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