From cc4a802827b03ab5766e78d288d672cd461695be Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 29 Mar 2024 12:54:01 +0000 Subject: [PATCH] Fix memoization of `actionIds` --- .../src/components/post-actions/actions.js | 143 ++++++++++-------- 1 file changed, 80 insertions(+), 63 deletions(-) diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index f3b96d7f22ec24..079c3b81edb1bb 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -416,71 +416,88 @@ export const postRevisionsAction = { export function usePostActions( onActionPerformed, actionIds = null ) { const permanentlyDeletePostAction = usePermanentlyDeletePostAction(); const restorePostAction = useRestorePostAction(); - return useMemo( () => { - // By default, return all actions... - const defaultActions = [ - editPostAction, - viewPostAction, - restorePostAction, - permanentlyDeletePostAction, - postRevisionsAction, - trashPostAction, - ]; + return useMemo( + () => { + // By default, return all actions... + const defaultActions = [ + editPostAction, + viewPostAction, + restorePostAction, + permanentlyDeletePostAction, + postRevisionsAction, + trashPostAction, + ]; - // ... unless `actionIds` was specified, in which case we find the - // actions matching the given IDs. - const actions = actionIds - ? actionIds.map( ( actionId ) => - defaultActions.find( ( { id } ) => actionId === id ) - ) - : defaultActions; + // ... unless `actionIds` was specified, in which case we find the + // actions matching the given IDs. + const actions = actionIds + ? actionIds.map( ( actionId ) => + defaultActions.find( ( { id } ) => actionId === id ) + ) + : defaultActions; - if ( onActionPerformed ) { - for ( let i = 0; i < actions.length; ++i ) { - if ( actions[ i ].callback ) { - const existingCallback = actions[ i ].callback; - actions[ i ] = { - ...actions[ i ], - callback: ( items, _onActionPerformed ) => { - existingCallback( items, ( _items ) => { - if ( _onActionPerformed ) { - _onActionPerformed( _items ); - } - onActionPerformed( actions[ i ].id, _items ); - } ); - }, - }; - } - if ( actions[ i ].RenderModal ) { - const ExistingRenderModal = actions[ i ].RenderModal; - actions[ i ] = { - ...actions[ i ], - RenderModal: ( props ) => { - return ( - { - if ( props.onActionPerformed ) { - props.onActionPerformed( _items ); - } - onActionPerformed( - actions[ i ].id, - _items - ); - } } - /> - ); - }, - }; + if ( onActionPerformed ) { + for ( let i = 0; i < actions.length; ++i ) { + if ( actions[ i ].callback ) { + const existingCallback = actions[ i ].callback; + actions[ i ] = { + ...actions[ i ], + callback: ( items, _onActionPerformed ) => { + existingCallback( items, ( _items ) => { + if ( _onActionPerformed ) { + _onActionPerformed( _items ); + } + onActionPerformed( + actions[ i ].id, + _items + ); + } ); + }, + }; + } + if ( actions[ i ].RenderModal ) { + const ExistingRenderModal = actions[ i ].RenderModal; + actions[ i ] = { + ...actions[ i ], + RenderModal: ( props ) => { + return ( + { + if ( props.onActionPerformed ) { + props.onActionPerformed( + _items + ); + } + onActionPerformed( + actions[ i ].id, + _items + ); + } } + /> + ); + }, + }; + } } } - } - return actions; - }, [ - actionIds, - permanentlyDeletePostAction, - restorePostAction, - onActionPerformed, - ] ); + return actions; + }, + + // Disable reason: if provided, `actionIds` is a shallow array of + // strings, and the strings themselves should be part of the useMemo + // dependencies. Two different disable statements are needed, as the + // first flags what it thinks are missing dependencies, and the second + // flags the array spread operation. + // + // eslint-disable-next-line react-hooks/exhaustive-deps + [ + // eslint-disable-next-line react-hooks/exhaustive-deps + ...( actionIds || [] ), + permanentlyDeletePostAction, + restorePostAction, + onActionPerformed, + ] + ); }