yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix multiple rerenders

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-23 06:18:14 +02:00
parent c475c96722
commit b009fd59bc
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/core/admin/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js
View File

@ -1,12 +1,13 @@
import React, { memo, useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useRBAC, LoadingIndicatorPage } from '@strapi/helper-plugin'; import { useRBAC, LoadingIndicatorPage, difference } from '@strapi/helper-plugin';
import isEqual from 'react-fast-compare';
import ListView from '../ListView'; import ListView from '../ListView';
import { generatePermissionsObject } from '../../utils'; import { generatePermissionsObject } from '../../utils';
const Permissions = props => { const Permissions = props => {
const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]); const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
const { isLoading, allowedActions } = useRBAC(viewPermissions, props.permissions); const { isLoading, allowedActions } = useRBAC(viewPermissions, props.permissions);
if (isLoading) { if (isLoading) {
@ -26,4 +27,16 @@ Permissions.propTypes = {
}; };
// This avoids the components to rerender on params change causing multiple requests to be fired // 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;
});