Effects with Cleanup

15Dkatz · Oct 25, 2022 · 407cd8e · 407cd8e
1 parent eb928ed
commit 407cd8e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/react-hooks/home/src/App.js b/react-hooks/home/src/App.js
@@ -6,6 +6,7 @@ import Gallery from './Gallery';
 
 function App() {
   const [userQuery, setUserQuery] = useState('');
+  const [showGallery, setShowGallery] = useState(true);
 
   const updateUserQuery = event => {
     console.log('userQuery', userQuery);
@@ -23,6 +24,10 @@ function App() {
     window.open(`https://google.com/search?q=${userQuery}`, '_blank');
   }
 
+  const toggleShowGallery = () => {
+    setShowGallery(!showGallery);
+  }
+
   return ( 
     <div className="App">
       <h1>Hello David</h1>
@@ -39,7 +44,14 @@ function App() {
       <hr />
       <Tasks />
       <hr />
-      <Gallery />
+      <div>
+        {
+          showGallery ? <Gallery /> : null
+        }
+        <button onClick={toggleShowGallery}>
+          {showGallery ? 'Hide' : 'Show'} Gallery
+        </button>
+      </div>
       <hr />
       <Stories />
     </div>

diff --git a/react-hooks/home/src/Gallery.js b/react-hooks/home/src/Gallery.js
@@ -5,13 +5,17 @@ function Gallery() {
   const [index, setIndex] = useState(0);
 
   useEffect(() => {
-    setInterval(() => {
+    const interval = setInterval(() => {
       setIndex(
         storedIndex => {
           return (storedIndex+1)%PICTURES.length;
         }
       );
     }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    }
   }, []);
 
   console.log('index', index);