From 2fdcadd5faccaf4139b63f383825849245581c0c Mon Sep 17 00:00:00 2001 From: Ashoat Tevosyan Date: Wed, 25 Sep 2024 13:36:12 -0400 Subject: [PATCH] [lib] Avoid regenerating holdersToRemove whenever Redux state changes Summary: This diff addresses [ENG-9391: Maximum update depth exceeded](https://linear.app/comm/issue/ENG-9391/maximum-update-depth-exceeded). The way this code was written, whenever the Redux state changed, `holdersToRemove` would be regenerated. This led to a React render loop. Test Plan: Confirm that the React render cycle goes away Reviewers: bartek, kamil, tomek, varun, will Reviewed By: varun Differential Revision: https://phab.comm.dev/D13465 --- lib/actions/holder-actions.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/actions/holder-actions.js b/lib/actions/holder-actions.js index ae2db6ad14..3d875ee33c 100644 --- a/lib/actions/holder-actions.js +++ b/lib/actions/holder-actions.js @@ -137,10 +137,13 @@ function useClearAllHolders(): () => Promise { const identityContext = React.useContext(IdentityClientContext); const getAuthMetadata = identityContext?.getAuthMetadata; - const holdersToRemove = useSelector(state => - Object.entries(state.holderStore.storedHolders) - .filter(([, holderInfo]) => holderInfo.status !== 'PENDING_REMOVAL') - .map(([blobHash, { holder }]) => ({ blobHash, holder })), + const storedHolders = useSelector(state => state.holderStore.storedHolders); + const holdersToRemove = React.useMemo( + () => + Object.entries(storedHolders) + .filter(([, holderInfo]) => holderInfo.status !== 'PENDING_REMOVAL') + .map(([blobHash, { holder }]) => ({ blobHash, holder })), + [storedHolders], ); return React.useCallback(async () => {