refactoring_useCounter

src/components/BackwordCounter.js

@@ -1,17 +1,10 @@
 import { useState, useEffect } from 'react';
 import Card from './UI/Card/Card';
+import useCounter from '../hooks/useCounter';
 
 
 const BackwardCounter = () => {
-  const [counter, setCounter] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCounter((prevCounter) => prevCounter - 1);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
+  const counter = useCounter(false);
 
   return <Card>{counter}</Card>;
 };

src/components/ForwardCounter.js

@@ -1,17 +1,12 @@
 import { useState, useEffect } from 'react';
 import Card from './UI/Card/Card';
+import useCounter from '../hooks/useCounter';
 
 
 const ForwardCounter = () => {
-  const [counter, setCounter] = useState(0);
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCounter((prevCounter) => prevCounter + 1);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
+  const counter =  useCounter(true);
+  console.log('counter', counter)
 
   return <Card>{counter}</Card>;
 };

src/hooks/useCounter.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+
+const useCounter = (isForward) => {
+
+    const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setCounter((prevCounter) => prevCounter + 1(isForward ? 1 : -1));
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return counter;
+
+};
+
+export default useCounter;