Repositories: fix lint warning react-hooks/exhaustive-deps with addin…

…g useCallback hook

this commit fix the exhaustive-deps by adding the useCallback hook.
after adding the missing dependencies to the useEffect,
I fix this problem  -gcaThe 'initializeRepositories' function makes the
dependencies of useMemo Hook (at line 256) change on every render.
Move it inside the useMemo callback. Alternatively,
wrap the definition of 'initializeRepositories' in its own useCallback() Hook  react-hooks/exhaustive-deps

src/Components/CreateImageWizard/formComponents/Repositories.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   useFieldApi,
@@ -155,42 +155,45 @@ const convertSchemaToContentSources = (repo) => {
 };
 
 const Repositories = (props) => {
-  const initializeRepositories = (contentSourcesReposList) => {
-    // Convert list of repositories into an object where key is repo URL
-    const contentSourcesRepos = contentSourcesReposList.reduce(
-      (accumulator, currentValue) => {
-        accumulator[currentValue.url] = currentValue;
-        return accumulator;
-      },
-      {}
-    );
+  const initializeRepositories = useCallback(
+    (contentSourcesReposList) => {
+      // Convert list of repositories into an object where key is repo URL
+      const contentSourcesRepos = contentSourcesReposList.reduce(
+        (accumulator, currentValue) => {
+          accumulator[currentValue.url] = currentValue;
+          return accumulator;
+        },
+        {}
+      );
 
-    // Repositories in the form state can be present when 'Recreate image' is used
-    // to open the wizard that are not necessarily in content sources.
-    const formStateReposList =
-      getState()?.values?.['original-payload-repositories'];
+      // Repositories in the form state can be present when 'Recreate image' is used
+      // to open the wizard that are not necessarily in content sources.
+      const formStateReposList =
+        getState()?.values?.['original-payload-repositories'];
 
-    const mergeRepositories = (contentSourcesRepos, formStateReposList) => {
-      const formStateRepos = {};
+      const mergeRepositories = (contentSourcesRepos, formStateReposList) => {
+        const formStateRepos = {};
 
-      for (const repo of formStateReposList) {
-        formStateRepos[repo.baseurl] = convertSchemaToContentSources(repo);
-        formStateRepos[repo.baseurl].name = '';
-      }
+        for (const repo of formStateReposList) {
+          formStateRepos[repo.baseurl] = convertSchemaToContentSources(repo);
+          formStateRepos[repo.baseurl].name = '';
+        }
 
-      // In case of duplicate repo urls, the repo from Content Sources overwrites the
-      // repo from the form state.
-      const mergedRepos = { ...formStateRepos, ...contentSourcesRepos };
+        // In case of duplicate repo urls, the repo from Content Sources overwrites the
+        // repo from the form state.
+        const mergedRepos = { ...formStateRepos, ...contentSourcesRepos };
 
-      return mergedRepos;
-    };
+        return mergedRepos;
+      };
 
-    const repositories = formStateReposList
-      ? mergeRepositories(contentSourcesRepos, formStateReposList)
-      : contentSourcesRepos;
+      const repositories = formStateReposList
+        ? mergeRepositories(contentSourcesRepos, formStateReposList)
+        : contentSourcesRepos;
 
-    return repositories;
-  };
+      return repositories;
+    },
+    [getState]
+  );
 
   const { getState, change } = useFormApi();
   const { input } = useFieldApi(props);
@@ -254,15 +257,18 @@ const Repositories = (props) => {
 
   const repositories = useMemo(() => {
     return data ? initializeRepositories(data.data) : {};
-  }, [firstRequest.data, followupRequest.data]);
+  }, [data, initializeRepositories]);
 
   const handleToggleClick = (event) => {
     const id = event.currentTarget.id;
     setPage(1);
     setToggleSelected(id);
   };
 
-  const isRepoSelected = (repoURL) => selected.includes(repoURL);
+  const isRepoSelected = useCallback(
+    (repoURL) => selected.includes(repoURL),
+    [selected]
+  );
 
   const handlePerPageSelect = (event, newPerPage, newPage) => {
     setPerPage(newPerPage);
@@ -290,7 +296,7 @@ const Repositories = (props) => {
         .filter((repo) => isRepoSelected(repo.url))
         .map((repo) => repo.url);
     }
-  }, [filterValue, repositories, toggleSelected]);
+  }, [filterValue, repositories, toggleSelected, isRepoSelected]);
 
   const handleClearFilter = () => {
     setFilterValue('');

src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   Alert,
@@ -213,9 +213,10 @@ const Repositories = () => {
     setToggleSelected(id);
   };
 
-  const isRepoSelected = (repoURL: string | undefined) =>
-    selected.includes(repoURL);
-
+  const isRepoSelected = useCallback(
+    (repoURL: string | undefined) => selected.includes(repoURL),
+    [selected]
+  );
   const handlePerPageSelect = (
     _: React.MouseEvent,
     newPerPage: number,
@@ -252,7 +253,7 @@ const Repositories = () => {
         .filter((repo: ApiRepositoryResponseRead) => isRepoSelected(repo.url!))
         .map((repo: ApiRepositoryResponseRead) => repo.url);
     }
-  }, [filterValue, data, toggleSelected]);
+  }, [filterValue, data, toggleSelected, isRepoSelected]);
 
   const handleClearFilter = () => {
     setFilterValue('');