From 2777d89c5199a3999084a8aa184ff30ee0780043 Mon Sep 17 00:00:00 2001
From: Lawrence Wang <l@lw.io>
Date: Tue, 21 May 2019 17:19:24 -0700
Subject: [PATCH] some simple examples of preventing re-renders due to store
 changes

just doing "Option 3" from [this comment](https://github.com/facebook/react/issues/15156), which is just about using useMemo. unfortunately this is not an easy pattern to encapsulate, because you can't call hooks from inside other hooks: https://gist.github.com/levity/3ab3e0f88fd28d55fde5444b9d482f98
---
 src/components/Sidebars/Global.js | 39 +++++++++++++++++++++++--------
 src/pages/CDP.js                  | 23 +++++++++++-------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/components/Sidebars/Global.js b/src/components/Sidebars/Global.js
index 4d8d36856..a7fb00473 100644
--- a/src/components/Sidebars/Global.js
+++ b/src/components/Sidebars/Global.js
@@ -4,19 +4,38 @@ import SidebarSystem from 'components/SidebarSystem';
 import { Box, Grid } from '@makerdao/ui-components-core';
 import { getAllFeeds } from 'reducers/feeds';
 import useStore from 'hooks/useStore';
+import { ETH } from '@makerdao/dai-plugin-mcd';
 
 const SidebarGlobalPanel = () => {
   const [{ system, feeds }] = useStore();
-  const uniqueFeeds = useMemo(() => getAllFeeds(feeds), [feeds]);
-
-  return (
-    <Box>
-      <Grid gridRowGap="s">
-        <SidebarFeeds feeds={uniqueFeeds} />
-        <SidebarSystem system={system} />
-      </Grid>
-    </Box>
-  );
+  return useMemo(() => {
+    console.log('SidebarGlobalPanel rendering');
+    const uniqueFeeds = getAllFeeds(feeds, [feeds]);
+    return (
+      <Box>
+        <Grid gridRowGap="s">
+          <SidebarFeeds feeds={uniqueFeeds} />
+          <SidebarSystem system={system} />
+        </Grid>
+        <Dev />
+      </Box>
+    );
+  }, [system, feeds]);
 };
 
 export default SidebarGlobalPanel;
+
+const Dev = () => {
+  const [, dispatch] = useStore();
+
+  window.randomizeEthPrice = () => {
+    const num = 200 + Math.random() * 50;
+    dispatch({ type: 'ETH.feedValueUSD', value: ETH(num) });
+  };
+
+  window.updateCdps = () => {
+    dispatch({ type: 'cdps/FETCHED_CDPS', payload: { cdps: [] } });
+  };
+
+  return null;
+};
diff --git a/src/pages/CDP.js b/src/pages/CDP.js
index 4ab1c8bc8..6a5ad96f7 100644
--- a/src/pages/CDP.js
+++ b/src/pages/CDP.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { hot } from 'react-hot-loader/root';
 import PageContentLayout from 'layouts/PageContentLayout';
@@ -257,18 +257,23 @@ function CDPView({ cdpId: _cdpId }) {
     })();
   }, [cdpId, feeds, maker]);
 
-  return cdp ? (
-    <CDPViewPresentation
-      cdp={cdp}
-      showSidebar={showSidebar}
-      account={account}
-    />
-  ) : (
-    <LoadingLayout />
+  return useMemo(
+    () =>
+      cdp ? (
+        <CDPViewPresentation
+          cdp={cdp}
+          showSidebar={showSidebar}
+          account={account}
+        />
+      ) : (
+        <LoadingLayout />
+      ),
+    [cdp, showSidebar, account]
   );
 }
 
 function CDPViewPresentation({ cdp, showSidebar, account }) {
+  console.log('CDPViewPresentation rendering');
   const liquidationPrice = round(cdp.liquidationPrice.toNumber(), 2).toFixed(2);
   const gem = cdp.type.currency.symbol;
   const collateralPrice = round(cdp.collateralPrice.toNumber(), 2);