main 🧊 fix remove for use queue

siberiacancode · Jun 2, 2024 · 30606ee · 30606ee
1 parent 8803be0
commit 30606ee
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 44 deletions.
diff --git a/docs/functions/hooks/[name].paths.ts b/docs/functions/hooks/[name].paths.ts
@@ -36,9 +36,10 @@ export default {
     // const features = params
     //   .filter(Boolean)
     //   .map((param) => {
-    //     return `\n- title: ${param?.params.name}\n  details: ${param?.params.description}\n  link: /functions/hooks/useBattery`;
+    //     return `\n- title: ${param?.params.name}\n  details: ${param?.params.description}\n  link: /functions/hooks/${param?.params.name}`;
     //   })
     //   .join(' ');
+    // console.log('@', features);
 
     return params.filter(Boolean);
   }

diff --git a/docs/index.md b/docs/index.md
@@ -19,121 +19,124 @@ features:
   link: /functions/hooks/useBattery
 - title: useBoolean
   details: Hook provides a boolean state and a function to toggle the boolean value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useBoolean
 - title: useClickOutside
   details: Hook to handle click events outside the specified target element(s)
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useClickOutside
 - title: useCopyToClipboard
   details: Hook that manages a copy to clipboard
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useCopyToClipboard
 - title: useCounter
   details: Hook that manages a counter with increment, decrement, reset, and set functionalities
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useCounter
 - title: useDefault
   details: Hook that returns the default value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useDefault
 - title: useDidUpdate
   details: Hook that behaves like useEffect, but skips the effect on the initial render
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useDidUpdate
 - title: useDocumentTitle
   details: Hook that manages the document title and allows updating it
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useDocumentTitle
 - title: useDocumentVisibility
   details: Hook that provides the current visibility state of the document
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useDocumentVisibility
+- title: useEvent
+  details: Hook that creates an event and returns a stable reference of it
+  link: /functions/hooks/useEvent
 - title: useFavicon
   details: Hook that manages the favicon
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useFavicon
 - title: useHash
   details: Hook that manages the hash value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useHash
 - title: useHotkeys
   details: Hook that listens for key press events
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useHotkeys
 - title: useHover
   details: Hook that defines the logic when hovering an element
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useHover
 - title: useIdle
   details: Hook that defines the logic when the user is idle
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useIdle
 - title: useIsFirstRender
   details: Hook that returns true if the component is first render
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useIsFirstRender
 - title: useIsomorphicLayoutEffect
   details: Hook conditionally selects either `useLayoutEffect` or `useEffect` based on the environment
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useIsomorphicLayoutEffect
 - title: useKeyPress
   details: Hook that listens for key press events
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useKeyPress
 - title: useKeysPressed
   details: Hook that listens for key press events
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useKeysPressed
 - title: useLocalStorage
   details: Hook that manages local storage value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useLocalStorage
 - title: useLogger
   details: Hook for debugging lifecycle
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useLogger
 - title: useMediaQuery
   details: Hook that manages a media query
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useMediaQuery
 - title: useMount
   details: Hook that executes a callback when the component mounts
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useMount
 - title: useNetwork
   details: Hook to track network status
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useNetwork
 - title: useOnline
   details: Hook that manages if the user is online
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useOnline
 - title: useOperatingSystem
   details: Hook that returns the operating system of the current browser
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useOperatingSystem
 - title: useOrientation
   details: Hook that returns the current screen orientation
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useOrientation
 - title: usePageLeave
   details: Hook what calls given function when mouse leaves the page
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/usePageLeave
 - title: usePrevious
   details: Hook that returns the previous value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/usePrevious
 - title: useQueue
   details: Hook that manages a queue
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useQueue
 - title: useRenderCount
   details: Hook returns count component render times
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useRenderCount
 - title: useRerender
   details: Hook that defines the logic to force rerender a component
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useRerender
 - title: useScript
   details: Hook that manages a script with onLoad, onError, and removeOnUnmount functionalities
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useScript
 - title: useSessionStorage
   details: Hook that manages session storage value
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useSessionStorage
 - title: useSet
   details: Hook that manages a set structure
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useSet
 - title: useStep
   details: Hook that create stepper
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useStep
 - title: useTimeout
   details: that executes a callback function after a specified delay
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useTimeout
 - title: useToggle
   details: Hook that create toggle
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useToggle
 - title: useUnmount
   details: Hook that defines the logic when unmounting a component
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useUnmount
 - title: useWindowEvent
   details: Hook attaches an event listener to the window object for the specified event
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useWindowEvent
 - title: useWindowSize
   details: Hook that manages a window size
-  link: /functions/hooks/useBattery
+  link: /functions/hooks/useWindowSize
 ---
 
 
diff --git a/src/hooks/useQueue/useQueue.demo.tsx b/src/hooks/useQueue/useQueue.demo.tsx
@@ -24,7 +24,14 @@ const Demo = () => {
       <button type='button' onClick={() => add(last === undefined ? 0 : last + 1)}>
         Add
       </button>
-      <button type='button' onClick={remove}>
+      <button
+        type='button'
+        onClick={() => {
+          const removed1 = remove();
+          const removed2 = remove();
+          console.log('@', removed1, removed2);
+        }}
+      >
         Remove
       </button>
     </div>

diff --git a/src/hooks/useQueue/useQueue.ts b/src/hooks/useQueue/useQueue.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { flushSync } from 'react-dom';
 
 /** The use queue return type */
 export interface UseQueueReturn<Value> {
@@ -36,10 +37,13 @@ export const useQueue = <Value>(initialValue: Value[] = []): UseQueueReturn<Valu
   const clear = () => setQueue([]);
   const remove = () => {
     let removed;
-    setQueue(([first, ...rest]) => {
-      removed = first;
-      return rest;
+    flushSync(() => {
+      setQueue(([first, ...rest]) => {
+        removed = first;
+        return rest;
+      });
     });
+
     return removed as Value;
   };