open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimize use fold hooks to trigger fewer re-renders

Browse Source
This commit is contained in:
James Grugett 2022-04-06 11:53:48 -05:00
parent 849248376b
commit dfa61be382
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/hooks/use-fold.ts
View File

@ -34,9 +34,12 @@ export const useFolds = () => {
export const useFoldsWithTags = (tags: string[] | undefined) => { export const useFoldsWithTags = (tags: string[] | undefined) => {
const [folds, setFolds] = useState<Fold[] | undefined>() const [folds, setFolds] = useState<Fold[] | undefined>()
const tagsKey = tags?.join(',')
useEffect(() => { useEffect(() => {
if (tags && tags.length > 0) return listenForFoldsWithTags(tags, setFolds) if (tags && tags.length > 0) return listenForFoldsWithTags(tags, setFolds)
}, [tags]) // eslint-disable-next-line react-hooks/exhaustive-deps
}, [tagsKey])
return folds return folds
} }
@ -44,9 +47,12 @@ export const useFoldsWithTags = (tags: string[] | undefined) => {
export const useFollowingFold = (fold: Fold, user: User | null | undefined) => { export const useFollowingFold = (fold: Fold, user: User | null | undefined) => {
const [following, setFollowing] = useState<boolean | undefined>() const [following, setFollowing] = useState<boolean | undefined>()
const foldId = fold?.id
const userId = user?.id
useEffect(() => { useEffect(() => {
if (user) return listenForFollow(fold, user, setFollowing) if (userId) return listenForFollow(foldId, userId, setFollowing)
}, [fold, user]) }, [foldId, userId])
return following return following
} }

6
web/lib/firebase/folds.ts
View File

@ -148,11 +148,11 @@ export async function unfollowFoldFromSlug(slug: string, userId: string) {
} }
export function listenForFollow( export function listenForFollow(
fold: Fold, foldId: string,
user: User, userId: string,
setFollow: (following: boolean) => void setFollow: (following: boolean) => void
) { ) {
const followDoc = doc(foldCollection, fold.id, 'followers', user.id) const followDoc = doc(foldCollection, foldId, 'followers', userId)
return listenForValue(followDoc, (value) => { return listenForValue(followDoc, (value) => {
setFollow(!!value) setFollow(!!value)
}) })