diff --git a/commafeed-client/src/components/content/Content.tsx b/commafeed-client/src/components/content/Content.tsx index 1cb2c587..f243dd87 100644 --- a/commafeed-client/src/components/content/Content.tsx +++ b/commafeed-client/src/components/content/Content.tsx @@ -1,12 +1,13 @@ import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core" import { Constants } from "app/constants" -import { useAppSelector } from "app/store" import { calculatePlaceholderSize } from "app/utils" import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading" import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave" +import React from "react" export interface ContentProps { content: string + highlight?: string } const useStyles = createStyles(theme => ({ @@ -82,10 +83,10 @@ class HighlightMatcher extends Matcher { } } -export function Content(props: ContentProps) { +// memoize component because Interweave is costly +const Content = React.memo((props: ContentProps) => { const { classes } = useStyles() - const search = useAppSelector(state => state.entries.search) - const matchers = search ? [new HighlightMatcher(search)] : [] + const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : [] return ( @@ -94,4 +95,6 @@ export function Content(props: ContentProps) { ) -} +}) + +export { Content } diff --git a/commafeed-client/src/components/content/FeedEntryBody.tsx b/commafeed-client/src/components/content/FeedEntryBody.tsx index 00d699f6..d22a5720 100644 --- a/commafeed-client/src/components/content/FeedEntryBody.tsx +++ b/commafeed-client/src/components/content/FeedEntryBody.tsx @@ -1,4 +1,5 @@ import { Box } from "@mantine/core" +import { useAppSelector } from "app/store" import { Entry } from "app/types" import { Content } from "./Content" import { Enclosure } from "./Enclosure" @@ -9,10 +10,11 @@ export interface FeedEntryBodyProps { } export function FeedEntryBody(props: FeedEntryBodyProps) { + const search = useAppSelector(state => state.entries.search) return ( - + {props.entry.enclosureType && props.entry.enclosureUrl && (