Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
feat: memoize heavy computations (#5841)
authored by
GitHub
cb7c3e7d
72ee5b37
+28
-23
+4
-4
apps/web/src/components/Account/FollowersYouKnowOverview.tsx
+4
-4
apps/web/src/components/Account/FollowersYouKnowOverview.tsx
···
2
2
import getAccount from "@hey/helpers/getAccount";
3
3
import getAvatar from "@hey/helpers/getAvatar";
4
4
import { type Follower, useFollowersYouKnowQuery } from "@hey/indexer";
5
-
import { type ReactNode, useEffect, useState } from "react";
5
+
import { type ReactNode, useEffect, useMemo, useState } from "react";
6
6
import { useLocation } from "react-router";
7
7
import FollowersYouKnow from "@/components/Shared/Modal/FollowersYouKnow";
8
8
import FollowersYouKnowShimmer from "@/components/Shared/Shimmer/FollowersYouKnowShimmer";
···
37
37
const accounts =
38
38
(data?.followersYouKnow?.items.slice(0, 4) as unknown as Follower[]) || [];
39
39
40
-
const renderAccountNames = () => {
40
+
const accountNames = useMemo(() => {
41
41
const names = accounts.map(
42
42
(account) => getAccount(account.follower as any).name
43
43
);
···
50
50
return `${names[0]}, ${names[1]}${count === 0 ? " and " : ", "}${names[2]}${count ? ` and ${count} other${count === 1 ? "" : "s"}` : ""}`;
51
51
52
52
return `${names[0]}, ${names[1]}, ${names[2]} and others`;
53
-
};
53
+
}, [accounts]);
54
54
55
55
const Wrapper = ({ children }: { children: ReactNode }) => (
56
56
<button
···
86
86
return null;
87
87
}
88
88
89
-
return <Wrapper>{renderAccountNames()}</Wrapper>;
89
+
return <Wrapper>{accountNames}</Wrapper>;
90
90
};
91
91
92
92
export default FollowersYouKnowOverview;
+12
-10
apps/web/src/components/Home/Timeline/EventType/Combined.tsx
+12
-10
apps/web/src/components/Home/Timeline/EventType/Combined.tsx
···
1
1
import { SparklesIcon } from "@heroicons/react/24/outline";
2
2
import type { TimelineItemFragment } from "@hey/indexer";
3
-
import { Fragment } from "react";
3
+
import { Fragment, useMemo } from "react";
4
4
import Accounts from "@/components/Shared/Account/Accounts";
5
5
6
6
interface CombinedProps {
···
12
12
13
13
const repostsLength = reposts.length;
14
14
15
-
const getAllAccounts = () => {
16
-
let accounts = reposts.map((event) => event.author);
17
-
accounts = accounts.filter(
18
-
(account, index, self) =>
19
-
index === self.findIndex((t) => t.address === account.address)
20
-
);
21
-
return accounts;
22
-
};
15
+
const accounts = useMemo(
16
+
() =>
17
+
reposts
18
+
.map((event) => event.author)
19
+
.filter(
20
+
(account, index, self) =>
21
+
index === self.findIndex((t) => t.address === account.address)
22
+
),
23
+
[reposts]
24
+
);
23
25
24
26
const actionArray = [];
25
27
if (repostsLength) {
···
29
31
return (
30
32
<div className="flex flex-wrap items-center space-x-1 pb-4 text-[13px] text-gray-500 leading-6 dark:text-gray-200">
31
33
<SparklesIcon className="size-4" />
32
-
<Accounts accounts={getAllAccounts()} />
34
+
<Accounts accounts={accounts} />
33
35
<div className="flex items-center space-x-1">
34
36
{actionArray.map((action, index) => (
35
37
<Fragment key={action}>
+12
-9
apps/web/src/components/Home/Timeline/EventType/Reposted.tsx
+12
-9
apps/web/src/components/Home/Timeline/EventType/Reposted.tsx
···
1
1
import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
2
2
import type { RepostFragment } from "@hey/indexer";
3
+
import { useMemo } from "react";
3
4
import Accounts from "@/components/Shared/Account/Accounts";
4
5
5
6
interface RepostedProps {
···
7
8
}
8
9
9
10
const Reposted = ({ reposts }: RepostedProps) => {
10
-
const getRepostedAccounts = () => {
11
-
let accounts = reposts.map((repost) => repost.author);
12
-
accounts = accounts.filter(
13
-
(account, index, self) =>
14
-
index === self.findIndex((t) => t.address === account.address)
15
-
);
16
-
return accounts;
17
-
};
11
+
const accounts = useMemo(
12
+
() =>
13
+
reposts
14
+
.map((repost) => repost.author)
15
+
.filter(
16
+
(account, index, self) =>
17
+
index === self.findIndex((t) => t.address === account.address)
18
+
),
19
+
[reposts]
20
+
);
18
21
19
22
return (
20
23
<div className="mb-3 flex items-center space-x-1 text-[13px] text-gray-500 dark:text-gray-200">
21
24
<ArrowsRightLeftIcon className="size-4" />
22
-
<Accounts accounts={getRepostedAccounts()} context="reposted" />
25
+
<Accounts accounts={accounts} context="reposted" />
23
26
</div>
24
27
);
25
28
};