diff --git a/README.md b/README.md
index 1515ff0e9..2d718ecfa 100644
--- a/README.md
+++ b/README.md
@@ -1188,7 +1188,7 @@ Renders a carousel component.
 
 - Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
 - Use an object, `style`, to hold the styles for the individual components.
-- Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
+- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
 - Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
 - Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
 
@@ -1213,6 +1213,7 @@ function Carousel(props) {
       const { carouselItems } = props;
       setActive((active + 1) % carouselItems.length);
     }, 2000);
+    return () => clearTimeout(scrollInterval);
   });
   const { carouselItems, ...rest } = props;
   return (
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 5e8f8cc3e..c73bf7359 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -40,7 +40,7 @@
       "type": "snippetListing",
       "title": "Carousel",
       "attributes": {
-        "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
+        "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
         "tags": [
           "visual",
           "children",
@@ -50,7 +50,7 @@
         ]
       },
       "meta": {
-        "hash": "0810223a6248d03b4adb32586b919c28979fe06bbff209fe8e18d890532a094a"
+        "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6"
       }
     },
     {
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index c57f1e5bc..885b4d9d4 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -53,10 +53,10 @@
       "type": "snippet",
       "attributes": {
         "fileName": "Carousel.md",
-        "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
+        "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Carousel(props) {\n  const [active, setActive] = React.useState(0);\n  let scrollInterval = null;\n  const style = {\n    carousel: {\n      position: 'relative'\n    },\n    carouselItem: {\n      position: 'absolute',\n      visibility: 'hidden'\n    },\n    visible: {\n      visibility: 'visible'\n    }\n  };\n  React.useEffect(() => {\n    scrollInterval = setTimeout(() => {\n      const { carouselItems } = props;\n      setActive((active + 1) % carouselItems.length);\n    }, 2000);\n  });\n  const { carouselItems, ...rest } = props;\n  return (\n    <div style={style.carousel}>\n      {carouselItems.map((item, index) => {\n        const activeStyle = active === index ? style.visible : {};\n        return React.cloneElement(item, {\n          ...rest,\n          style: {\n            ...style.carouselItem,\n            ...activeStyle\n          }\n        });\n      })}\n    </div>\n  );\n}",
+          "code": "function Carousel(props) {\n  const [active, setActive] = React.useState(0);\n  let scrollInterval = null;\n  const style = {\n    carousel: {\n      position: 'relative'\n    },\n    carouselItem: {\n      position: 'absolute',\n      visibility: 'hidden'\n    },\n    visible: {\n      visibility: 'visible'\n    }\n  };\n  React.useEffect(() => {\n    scrollInterval = setTimeout(() => {\n      const { carouselItems } = props;\n      setActive((active + 1) % carouselItems.length);\n    }, 2000);\n    return () => clearTimeout(scrollInterval);\n  });\n  const { carouselItems, ...rest } = props;\n  return (\n    <div style={style.carousel}>\n      {carouselItems.map((item, index) => {\n        const activeStyle = active === index ? style.visible : {};\n        return React.cloneElement(item, {\n          ...rest,\n          style: {\n            ...style.carouselItem,\n            ...activeStyle\n          }\n        });\n      })}\n    </div>\n  );\n}",
           "example": "ReactDOM.render(\n  <Carousel\n    carouselItems={[\n      <div>carousel item 1</div>,\n      <div>carousel item 2</div>,\n      <div>carousel item 3</div>\n    ]}\n  />,\n  document.getElementById('root')\n);"
         },
         "tags": [
@@ -68,7 +68,7 @@
         ]
       },
       "meta": {
-        "hash": "0810223a6248d03b4adb32586b919c28979fe06bbff209fe8e18d890532a094a"
+        "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6"
       }
     },
     {