Fix multiple rerenders

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

View File

@ -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;
});