Enable ESLint rule: react/jsx-no-constructed-context-values

.eslintrc.js

@@ -65,7 +65,6 @@ module.exports = {
     'nonblock-statement-body-position': 'off',
     'react/jsx-curly-newline': 'off',
     'react/jsx-indent': 'off',
-    'react/jsx-no-constructed-context-values': 'off',
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'react/no-unused-prop-types': 'off',
     'consistent-return': 'off',

packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx

@@ -116,16 +116,22 @@ const MonitoringDashboard: React.FC = () => {
     return {};
   }, [applicationSets, subscriptions, discovered, loaded, loadError]);
 
-  const dRResourcesContext = {
-    drClusterAppsMap: aggregatedAppsMap,
-    loaded,
-    loadError,
-  };
+  const dRResourcesContext = React.useMemo(() => {
+    return {
+      drClusterAppsMap: aggregatedAppsMap,
+      loaded,
+      loadError,
+    };
+  }, [aggregatedAppsMap, loaded, loadError]);
+
+  const csvContextData = React.useMemo(() => {
+    return { csvData, csvError, csvLoading };
+  }, [csvData, csvError, csvLoading]);
 
   // ToDo(Sanjal): combime multiple Context together to make it scalable
   // refer: https://javascript.plainenglish.io/how-to-combine-context-providers-for-cleaner-react-code-9ed24f20225e
   return (
-    <CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
+    <CSVStatusesContext.Provider value={csvContextData}>
       <DRResourcesContext.Provider value={dRResourcesContext}>
         <UpperSection />
       </DRResourcesContext.Provider>

packages/ocs/dashboards/block-pool/block-pool-dashboard.tsx

@@ -23,8 +23,11 @@ const mainCards = [
 const rightCards = [{ Card: MirroringCard }];
 
 export const BlockPoolDashboard: React.FC<PoolDashboardProps> = ({ obj }) => {
+  const contextData = React.useMemo(() => {
+    return { obj };
+  }, [obj]);
   return (
-    <BlockPoolDashboardContext.Provider value={{ obj }}>
+    <BlockPoolDashboardContext.Provider value={contextData}>
       <Overview>
         <OverviewGrid
           mainCards={mainCards}

packages/odf/components/s3-browser/noobaa-context.tsx

@@ -76,10 +76,12 @@ export const NoobaaS3Provider: React.FC<NoobaaS3ProviderType> = ({
   const anyError =
     odfNsLoadError || secretError || routeError || noobaaS3Error || error;
 
+  const contextData = React.useMemo(() => {
+    return { noobaaS3, noobaaS3Route: s3Route.current };
+  }, [noobaaS3]);
+
   return allLoaded && !anyError ? (
-    <NoobaaS3Context.Provider
-      value={{ noobaaS3, noobaaS3Route: s3Route.current }}
-    >
+    <NoobaaS3Context.Provider value={contextData}>
       {children}
     </NoobaaS3Context.Provider>
   ) : (

packages/odf/components/topology/Topology.tsx

@@ -571,24 +571,39 @@ const Topology: React.FC = () => {
 
   const zones = memoizedNodes.map(getTopologyDomain);
 
+  const topologyDataContextData = React.useMemo(() => {
+    return {
+      nodes: memoizedNodes,
+      storageCluster: storageCluster,
+      zones,
+      deployments: memoizedDeployments,
+      visualizationLevel: visualizationLevel,
+      activeNode,
+      setActiveNode,
+      nodeDeploymentMap,
+      selectedElement,
+      setSelectedElement: setSelectedElement as any,
+    };
+  }, [
+    memoizedNodes,
+    storageCluster,
+    zones,
+    memoizedDeployments,
+    visualizationLevel,
+    activeNode,
+    setActiveNode,
+    nodeDeploymentMap,
+    selectedElement,
+    setSelectedElement,
+  ]);
+
+  const topologySearchContextData = React.useMemo(() => {
+    return { activeItemsUID, setActiveItemsUID, activeItem, setActiveItem };
+  }, [activeItemsUID, setActiveItemsUID, activeItem, setActiveItem]);
+
   return (
-    <TopologyDataContext.Provider
-      value={{
-        nodes: memoizedNodes,
-        storageCluster: storageCluster,
-        zones,
-        deployments: memoizedDeployments,
-        visualizationLevel: visualizationLevel,
-        activeNode,
-        setActiveNode,
-        nodeDeploymentMap,
-        selectedElement,
-        setSelectedElement: setSelectedElement as any,
-      }}
-    >
-      <TopologySearchContext.Provider
-        value={{ activeItemsUID, setActiveItemsUID, activeItem, setActiveItem }}
-      >
+    <TopologyDataContext.Provider value={topologyDataContextData}>
+      <TopologySearchContext.Provider value={topologySearchContextData}>
         <VisualizationProvider controller={controller}>
           <div className="odf__topology-view" id="odf-topology">
             <TopologyTopBar />