feat: add set behaviour with useEffect but it trigger 2 component render

wako057 · Jan 20, 2024 · 6d3c310 · 6d3c310
1 parent 7dfc234
commit 6d3c310
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/Counter/Counter.jsx b/src/components/Counter/Counter.jsx
@@ -1,4 +1,4 @@
-import { useState, memo, useCallback, useMemo } from 'react';
+import {useState, memo, useCallback, useMemo, useEffect} from 'react';
 
 import IconButton from '../UI/IconButton.jsx';
 import MinusIcon from '../UI/Icons/MinusIcon.jsx';
@@ -33,6 +33,9 @@ const Counter = memo(function Counter({ initialCount }) {
     [initialCount]
   );
 
+  useEffect(() => {
+    setCounterChanges([{ value: initialCount, id: Math.random() * 1000}]);
+  }, [initialCount]);
   // const [counter, setCounter] = useState(initialCount);
   const [counterChanges, setCounterChanges] = useState([
     {value: initialCount, id: Math.random() * 1000}

diff --git a/src/components/Counter/CounterHistory.jsx b/src/components/Counter/CounterHistory.jsx
@@ -23,7 +23,7 @@ export default function CounterHistory({ history }) {
 
   return (
     <ol>
-      {history.map((count) => (
+      {history.map((count, index) => (
         <HistoryItem key={count.id} count={count.value} />
       ))}
     </ol>