this repo has no description
Reduce extraneous fetch calls
+32
-10
+32
-10
src/pages/account-statuses.jsx
+32
-10
src/pages/account-statuses.jsx
···
1
1
import { MenuItem } from '@szhsin/react-menu';
2
-
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
2
+
import {
3
+
useCallback,
4
+
useEffect,
5
+
useMemo,
6
+
useRef,
7
+
useState,
8
+
} from 'preact/hooks';
3
9
import { useParams, useSearchParams } from 'react-router-dom';
4
10
import { useSnapshot } from 'valtio';
5
11
···
217
223
: 'Account posts',
218
224
'/:instance?/a/:id',
219
225
);
226
+
227
+
const fetchAccountPromiseRef = useRef();
228
+
const fetchAccount = useCallback(() => {
229
+
const fetchPromise =
230
+
fetchAccountPromiseRef.current || masto.v1.accounts.$select(id).fetch();
231
+
fetchAccountPromiseRef.current = fetchPromise;
232
+
return fetchPromise;
233
+
}, [id, masto]);
234
+
220
235
useEffect(() => {
221
236
(async () => {
222
237
try {
223
-
const acc = await masto.v1.accounts.$select(id).fetch();
238
+
const acc = await fetchAccount();
224
239
console.log(acc);
225
240
setAccount(acc);
226
241
} catch (e) {
···
240
255
241
256
const { displayName, acct, emojis } = account || {};
242
257
258
+
const accountInfoMemo = useMemo(() => {
259
+
const cachedAccount = snapStates.accounts[`${id}@${instance}`];
260
+
return (
261
+
<AccountInfo
262
+
instance={instance}
263
+
account={cachedAccount || id}
264
+
fetchAccount={fetchAccount}
265
+
authenticated={authenticated}
266
+
standalone
267
+
/>
268
+
);
269
+
}, [id, instance, authenticated, fetchAccount]);
270
+
243
271
const filterBarRef = useRef();
244
272
const TimelineStart = useMemo(() => {
245
-
const cachedAccount = snapStates.accounts[`${id}@${instance}`];
246
273
const filtered =
247
274
!excludeReplies || excludeBoosts || tagged || media || !!month;
275
+
248
276
return (
249
277
<>
250
-
<AccountInfo
251
-
instance={instance}
252
-
account={cachedAccount || id}
253
-
fetchAccount={() => masto.v1.accounts.$select(id).fetch()}
254
-
authenticated={authenticated}
255
-
standalone
256
-
/>
278
+
{accountInfoMemo}
257
279
<div class="filter-bar" ref={filterBarRef}>
258
280
{filtered ? (
259
281
<Link