From 407cd8ea3a30a6295709e4211e706acb9fdacda0 Mon Sep 17 00:00:00 2001
From: David Katz <15Dkatz@shcp.edu>
Date: Tue, 25 Oct 2022 15:02:05 -0700
Subject: [PATCH] Effects with Cleanup

---
 react-hooks/home/src/App.js     | 14 +++++++++++++-
 react-hooks/home/src/Gallery.js |  6 +++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/react-hooks/home/src/App.js b/react-hooks/home/src/App.js
index 9ecb754..2d26e54 100644
--- 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
index 4a533fe..16dc69d 100644
--- 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);