refactor: add whyDidYouRender

src/components/ColorTitle/index.js

@@ -74,6 +74,9 @@ const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
   const { isMobile } = useMobile();
   const { poetry, fetchPoetry } = usePoetry(name);
   const oppoColor = getCorrectTextColor(RGB);
+
+  console.log('color title');
+
   return (
     <Wrapper className={isMobile ? 'mobile' : ''} style={{ color: oppoColor }}>
       <h1>{name}</h1>
@@ -91,5 +94,8 @@ const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
     </Wrapper>
   );
 };
-
+ColorTitle.whyDidYouRender = {
+  logOnDifferentValues: true,
+  customName: 'ColorTitleComp'
+};
 export default ColorTitle;

src/index.js

@@ -5,6 +5,10 @@ import GlobalStyle from './Global.style';
 
 import register from './registerServiceWorker';
 
+if (process.env.NODE_ENV !== 'production') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React);
+}
 ReactDOM.render(
   <>
     <GlobalStyle />

src/pages/index.js

@@ -57,6 +57,8 @@ const Index = () => {
   const { visible: modalVisible, showModal, closeModal } = useModal();
   const { preview, showPreview, closePreview } = usePreview();
   const { sets, currSet, currColor, updateCurrColor, updateCurrSet } = useColor();
+  console.log('page index');
+
   return (
     <Suspense fallback={<Loading color="rgba(57, 47, 65, 0.8)" size="4" sizeUnit="rem" />}>
       <Wrapper>
@@ -102,4 +104,8 @@ const Index = () => {
     </Suspense>
   );
 };
+Index.whyDidYouRender = {
+  logOnDifferentValues: true,
+  customName: 'IndexPage'
+};
 export default Index;