diff --git a/packages/strapi-admin/admin/src/containers/LeftMenu/useMenuSections.js b/packages/strapi-admin/admin/src/containers/LeftMenu/useMenuSections.js index 31b63d0ca0..880f835275 100644 --- a/packages/strapi-admin/admin/src/containers/LeftMenu/useMenuSections.js +++ b/packages/strapi-admin/admin/src/containers/LeftMenu/useMenuSections.js @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; import { useUser } from 'strapi-helper-plugin'; import { useSelector, useDispatch } from 'react-redux'; import getCtOrStLinks from './utils/getCtOrStLinks'; @@ -14,10 +14,20 @@ const useMenuSections = (plugins, shouldUpdateStrapi) => { const dispatch = useDispatch(); const { userPermissions } = useUser(); const { menu: settingsMenu } = useSettingsMenu(true); + // We are using a ref because we don't want our effect to have this in its dependencies array + const generalSectionLinksRef = useRef(state.generalSectionLinks); + const shouldUpdateStrapiRef = useRef(shouldUpdateStrapi); + // Since the settingsMenu is not managing any state because of the true argument we can use a ref here + // so we don't need to add it to the effect dependencies array + const settingsMenuRef = useRef(settingsMenu); + // Once in the app lifecycle the plugins should not be added into any dependencies array, in order to prevent + // the effect to be run when another plugin is using one plugins internal api for instance + // so it's definitely ok to use a ref here + const pluginsRef = useRef(plugins); useEffect(() => { const resolvePermissions = async () => { - const pluginsSectionLinks = toPluginLinks(plugins); + const pluginsSectionLinks = toPluginLinks(pluginsRef.current); const { authorizedCtLinks, authorizedStLinks, contentTypes } = await getCtOrStLinks( userPermissions ); @@ -29,9 +39,9 @@ const useMenuSections = (plugins, shouldUpdateStrapi) => { const authorizedGeneralSectionLinks = await getGeneralLinks( userPermissions, - state.generalSectionLinks, - settingsMenu, - shouldUpdateStrapi + generalSectionLinksRef.current, + settingsMenuRef.current, + shouldUpdateStrapiRef.current ); dispatch(setCtOrStLinks(authorizedCtLinks, authorizedStLinks, contentTypes)); @@ -40,8 +50,7 @@ const useMenuSections = (plugins, shouldUpdateStrapi) => { }; resolvePermissions(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [plugins, userPermissions, dispatch]); + }, [userPermissions, dispatch]); return state; };