From e1da97d92eb34f05c32d3f42f2878189a3a9ea49 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Tue, 4 Oct 2022 21:33:43 -0400
Subject: [PATCH] feat: implements useId hook

---
 src/SliderProvider/index.tsx |  9 +++------
 src/makeID.ts                | 15 ---------------
 2 files changed, 3 insertions(+), 21 deletions(-)
 delete mode 100644 src/makeID.ts

diff --git a/src/SliderProvider/index.tsx b/src/SliderProvider/index.tsx
index 4859999..2358555 100644
--- a/src/SliderProvider/index.tsx
+++ b/src/SliderProvider/index.tsx
@@ -1,5 +1,6 @@
 import React, {
   useEffect,
+  useId,
   useReducer,
   useRef,
   useState,
@@ -12,7 +13,6 @@ import { useBreakpoints } from './useBreakpoints';
 import { useMarquee } from './useMarquee';
 import { useAutoplay } from './useAutoplay';
 import { useScrollToIndex } from './useScrollToIndex';
-import { makeID } from '../makeID';
 
 export type ChildFunction = (context: ISliderContext) => React.ReactNode; // eslint-disable-line no-unused-vars
 
@@ -53,11 +53,8 @@ const SliderProvider: React.FC<SliderProviderProps> = (props) => {
   } = props;
 
   // NOTE: the 'aria-controls' attribute relies on this matching IDs
-  const [id, setID] = useState(() => idFromProps || makeID(5));
-
-  useEffect(() => {
-    setID(idFromProps || makeID(5));
-  }, [idFromProps])
+  const uniqueID = useId();
+  const id = idFromProps || uniqueID;
 
   const settings = useBreakpoints(props);
 
diff --git a/src/makeID.ts b/src/makeID.ts
deleted file mode 100644
index a039949..0000000
--- a/src/makeID.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const makeID = (length: number) => {
-  let result = '';
-
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  const charactersLength = characters.length;
-
-  characters.split('').forEach((char, index) => {
-    if (index < length) {
-      result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-  });
-
-  return result;
-
-}