refactor: color click response delay

src/App.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
-import scrollIntoView from 'scroll-into-view-if-needed';
+import React, { useState, useEffect } from 'react';
 
 import ColorTitle from './components/ColorTitle';
 import Color from './components/Color';
@@ -38,17 +37,8 @@ const SelectedColor = JSON.parse(localStorage.getItem('SELECTED_COLOR') || 'null
 };
 const TheColors = process.env.NODE_ENV === 'production' ? allColors : colors;
 const App = () => {
-  const colorContainer = useRef(null);
   const { visible: modalVisible, showModal, closeModal } = useModal();
   const [currColor, setCurrColor] = useState(SelectedColor);
-  useEffect(() => {
-    const target = colorContainer.current.querySelector('.curr');
-    scrollIntoView(target, {
-      behavior: 'smooth',
-      block: 'center',
-      scrollMode: 'if-needed'
-    });
-  }, []);
   useEffect(() => {
     document.body.style.backgroundColor = currColor.hex;
   }, [currColor]);
@@ -63,7 +53,7 @@ const App = () => {
     <>
       <Wrapper>
         <nav>
-          <ul ref={colorContainer} className="colors">
+          <ul className="colors">
             {TheColors.map((color, idx) => {
               return (
                 <Color

src/components/Color.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -103,16 +103,24 @@ const Wrapper = styled.li.attrs(({ color }) => ({
 const Color = ({ setCurrColor, seq = 1, isCurr, hex, name, pinyin, CMYK, RGB }) => {
   const [r, g, b] = RGB;
   const [c, m, y, k] = CMYK;
-  const handleColorClick = ({ target }) => {
-    scrollIntoView(target, {
-      behavior: 'smooth',
-      block: 'center',
-      scrollMode: 'if-needed'
-    });
-    setCurrColor(hex);
-  };
+  const colorEle = useRef(null);
+  useEffect(() => {
+    if (isCurr) {
+      scrollIntoView(colorEle.current, {
+        behavior: 'smooth',
+        block: 'center',
+        scrollMode: 'if-needed'
+      });
+    }
+  }, [isCurr]);
   return (
-    <Wrapper rgb={RGB} className={isCurr && 'curr'} onClick={handleColorClick} color={hex}>
+    <Wrapper
+      ref={colorEle}
+      rgb={RGB}
+      className={isCurr && 'curr'}
+      onClick={setCurrColor.bind(null, hex)}
+      color={hex}
+    >
       <div className="line1">
         <div className="cmyk">
           <i className="circle c">