From fe916dc20ab10d5dbe86f0035ea00360733a86c7 Mon Sep 17 00:00:00 2001
From: Jipson <jipson09saad@gmail.com>
Date: Thu, 28 Sep 2023 22:44:52 -0500
Subject: [PATCH] feat: improve performance using uuid in key instead index
 array position

---
 package-lock.json |  4 ++--
 src/Carousel.tsx  | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 224a9cd..1eb982b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@codelytv/react-carousel",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codelytv/react-carousel",
-      "version": "1.0.0",
+      "version": "1.0.3",
       "license": "MIT",
       "devDependencies": {
         "@storybook/addon-essentials": "^7.0.17",
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
index 35589bc..13e4ce9 100644
--- a/src/Carousel.tsx
+++ b/src/Carousel.tsx
@@ -43,11 +43,17 @@ export function Carousel({
 		scrollSliderPrevious(slider);
 	}
 
+	function uuid() {
+		return (
+			Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+		);
+	}
+
 	return (
 		<div className="carousel">
 			<div ref={slider} className="carousel__slider">
-				{children.map((child, index) => (
-					<div key={index} className="carousel__slide">
+				{children.map((child) => (
+					<div key={uuid()} className="carousel__slide">
 						{child}
 					</div>
 				))}