[lib] Fix memoization of useSearchSidebars
ClosedPublic
Actions

Authored by ashoat on Sep 26 2023, 11:04 AM.

Details

Reviewers

atul
ginsu

Commits

rCOMM101eb34481de: [lib] Fix memoization of useSearchSidebars

Summary

This addresses ENG-5041. The issue was very similar ENG-4605, which was solved by D8760. Basically we get into an infinite render loop because we get a new array passed in every time, which triggers a new setState on this line, which triggers a new call to useSearchSidebars with a new array...

Adding some memoization here fixed the issue.

Test Plan

I was able to repro the issue in my local environment. After this change, the issue no longer repros

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Sep 26 2023, 11:04 AM

Herald added a subscriber: tomek. · View Herald TranscriptSep 26 2023, 11:05 AM

ashoat published this revision for review.Sep 26 2023, 11:06 AM

Harbormaster completed remote builds in B22845: Diff 31422.Sep 26 2023, 11:23 AM

atul accepted this revision.Sep 26 2023, 11:24 AM

This revision is now accepted and ready to land.Sep 26 2023, 11:24 AM

Closed by commit rCOMM101eb34481de: [lib] Fix memoization of useSearchSidebars (authored by ashoat). · Explain WhySep 26 2023, 11:29 AM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM101eb34481de: [lib] Fix memoization of useSearchSidebars.

ashoat mentioned this in D13874: [lib] Avoid creating new array on every invocation of useThreadHasPermission.Nov 7 2024, 5:13 AM

Revision Contents
Changeset List

Path

Size

lib/

hooks/

search-threads.js

4 lines

Diff 31423

View Options

lib/hooks/search-threads.js

This file was added.

				// @flow

				import * as React from 'react';

				import type { UserListItem } from 'lib/types/user-types';

				import AddMembersItem from './add-members-item.react';
				import css from './members-modal.css';

				type AddMemberItemGroupProps = {
				+header: string,
				+userInfos: $ReadOnlyArray<UserListItem>,
				+onUserClick: (userID: string) => void,
				+usersAdded: $ReadOnlySet<string>,
				};
				function AddMembersItemGroup(props: AddMemberItemGroupProps): React.Node {
				const { userInfos, onUserClick, usersAdded, header } = props;

				const sortedUserInfos = React.useMemo(() => {
				return [...userInfos].sort((a, b) => a.username.localeCompare(b.username));
				}, [userInfos]);

				const userInfosComponents = React.useMemo(
				() =>
				sortedUserInfos.map(userInfo => (
				<AddMembersItem
				key={userInfo.id}
				userInfo={userInfo}
				onClick={onUserClick}
				userAdded={usersAdded.has(userInfo.id)}
				/>
				)),
				[onUserClick, sortedUserInfos, usersAdded],
				);

				return (
				<>
				<div className={css.addMemberItemsGroupHeader}>{header}:</div>
				{userInfosComponents}
				</>
				);
				}

				export default AddMembersItemGroup;

[lib] Fix memoization of useSearchSidebarsClosedPublicActions