Merge pull request #15744 from strapi/fix/custom-inputs-rerendering-hook

packages/core/admin/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -11,13 +11,12 @@ const componentStore = new Map();
  */
 const useLazyComponents = (componentUids = []) => {
   const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
-  const [loading, setLoading] = useState(() => {
-    if (componentStore.size === 0 && componentUids.length > 0) {
-      return true;
-    }
-
-    return false;
-  });
+  /**
+   * Start loading only if there are any components passed in
+   * and there are some new to load
+   */
+  const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+  const [loading, setLoading] = useState(() => !!newUids.length);
   const customFieldsRegistry = useCustomFields();
 
   useEffect(() => {
@@ -36,11 +35,8 @@ const useLazyComponents = (componentUids = []) => {
       setStore(Object.fromEntries(componentStore));
     };
 
-    if (componentUids.length && loading) {
-      /**
-       * These uids are not in the component store therefore we need to get the components
-       */
-      const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+    if (newUids.length > 0) {
+      setLoading(true);
 
       const componentPromises = newUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
@@ -52,7 +48,7 @@ const useLazyComponents = (componentUids = []) => {
         lazyLoadComponents(newUids, componentPromises);
       }
     }
-  }, [componentUids, customFieldsRegistry, loading]);
+  }, [newUids, customFieldsRegistry]);
 
   /**
    * Wrap this in a callback so it can be used in

packages/core/admin/admin/src/content-manager/hooks/useLazyComponents/tests/useLazyComponents.test.js

@@ -72,4 +72,44 @@ describe('useLazyComponents', () => {
     expect(result.current.isLazyLoading).toEqual(false);
     expect(result.current.lazyComponentStore).toEqual({});
   });
+
+  test('assuming the store has been initialised before hand, other hooks called should be able to modify the global cache and access it', async () => {
+    const { result: initialResult, waitFor } = renderHook(() =>
+      useLazyComponents(['plugin::test.color'])
+    );
+
+    await waitFor(() =>
+      expect(initialResult.current.lazyComponentStore['plugin::test.color']).toBeDefined()
+    );
+
+    const { result: actualResult, waitFor: secondWaitFor } = renderHook(() =>
+      useLazyComponents(['plugin::test.hex'])
+    );
+
+    cleanup = actualResult.current.cleanup;
+
+    await secondWaitFor(() => expect(actualResult.current.isLazyLoading).toBe(false));
+
+    expect(actualResult.current.lazyComponentStore['plugin::test.hex']).toBeDefined();
+    expect(actualResult.current.lazyComponentStore['plugin::test.color']).toBeDefined();
+  });
+
+  test('if the argument for component uids change and it contains new ones, these should be added to the store', async () => {
+    const {
+      result: initialResult,
+      waitFor,
+      rerender,
+    } = renderHook(() => useLazyComponents(['plugin::test.color']));
+
+    await waitFor(() =>
+      expect(initialResult.current.lazyComponentStore['plugin::test.color']).toBeDefined()
+    );
+
+    rerender(['plugin::test.hex']);
+
+    await waitFor(() => expect(initialResult.current.isLazyLoading).toBe(false));
+
+    expect(initialResult.current.lazyComponentStore['plugin::test.hex']).toBeDefined();
+    expect(initialResult.current.lazyComponentStore['plugin::test.color']).toBeDefined();
+  });
 });