From e7d5cceedc3c594296040bc418f453a20408241c Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Thu, 30 Jun 2022 17:50:21 +0800
Subject: [PATCH] fix: fix timer in InfoButton component

1. Fix timer by useRef instead of useState
2. Clear timer when component was destroyed

Change-Id: I60c23a71ffb50aed866aff947908e72dae3d5585
---
 src/components/InfoButton/index.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/InfoButton/index.jsx b/src/components/InfoButton/index.jsx
index a699b89e..4789717a 100644
--- a/src/components/InfoButton/index.jsx
+++ b/src/components/InfoButton/index.jsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Button, Card, Tooltip, Switch } from 'antd';
 import { ExpandOutlined, CompressOutlined } from '@ant-design/icons';
 
@@ -32,14 +32,13 @@ export default function InfoButton(props) {
   } = props;
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const [auto, setAuto] = useState(ableAuto);
-  const [timer, setTimer] = useState(null);
   const [hover, setHover] = useState(false);
+  const timer = useRef();
 
   const clearTimer = () => {
-    if (timer) {
-      clearTimeout(timer);
+    if (timer.current) {
+      clearTimeout(timer.current);
     }
-    setTimer(null);
   };
 
   const open = () => {
@@ -55,15 +54,14 @@ export default function InfoButton(props) {
     if (collapsed) {
       return;
     }
-    if (timer) {
+    if (timer.current) {
       clearTimer();
     }
-    const newTimer = setTimeout(() => {
+    timer.current = setTimeout(() => {
       if (!collapsed) {
         close();
       }
     }, seconds * 1000);
-    setTimer(newTimer);
   };
 
   useEffect(() => {
@@ -84,6 +82,9 @@ export default function InfoButton(props) {
       open();
       startTimer();
     }
+    return () => {
+      clearTimer();
+    };
   }, [checkValue]);
 
   const onChangeAuto = (checked) => {