From b009fd59bcbc949dfbcae95fee57e7d6f123082a Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 23 Sep 2021 06:18:14 +0200 Subject: [PATCH] Fix multiple rerenders Signed-off-by: soupette --- .../ListViewLayoutManager/Permissions.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js b/packages/core/admin/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js index 7d7c5c0faa..2423c82c38 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js @@ -1,12 +1,13 @@ import React, { memo, useMemo } from 'react'; import PropTypes from 'prop-types'; -import { useRBAC, LoadingIndicatorPage } from '@strapi/helper-plugin'; -import isEqual from 'react-fast-compare'; +import { useRBAC, LoadingIndicatorPage, difference } from '@strapi/helper-plugin'; + import ListView from '../ListView'; import { generatePermissionsObject } from '../../utils'; const Permissions = props => { const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]); + const { isLoading, allowedActions } = useRBAC(viewPermissions, props.permissions); if (isLoading) { @@ -26,4 +27,16 @@ Permissions.propTypes = { }; // This avoids the components to rerender on params change causing multiple requests to be fired -export default memo(Permissions, isEqual); +export default memo(Permissions, (prev, next) => { + const differenceBetweenRerenders = difference(prev, next); + // Here the submenu is using a navlink which doesn't support the state + // When we navigate from the EV to the LV using the menu the state is lost at some point + // and this causes the component to rerender twice and firing requests twice + // this hack prevents this + // TODO at some point we will need to refacto the LV and migrate to react-query + const propNamesThatHaveChanged = Object.keys(differenceBetweenRerenders).filter( + propName => propName !== 'state' + ); + + return propNamesThatHaveChanged.length > 0; +});