From 30606eefd0c2dad93300960ea73f58d146e4e281 Mon Sep 17 00:00:00 2001 From: debabin Date: Sun, 2 Jun 2024 20:16:39 +0700 Subject: [PATCH] =?UTF-8?q?main=20=F0=9F=A7=8A=20fix=20remove=20for=20use?= =?UTF-8?q?=20queue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/functions/hooks/[name].paths.ts | 3 +- docs/index.md | 81 ++++++++++++++-------------- src/hooks/useQueue/useQueue.demo.tsx | 9 +++- src/hooks/useQueue/useQueue.ts | 10 ++-- 4 files changed, 59 insertions(+), 44 deletions(-) diff --git a/docs/functions/hooks/[name].paths.ts b/docs/functions/hooks/[name].paths.ts index f5c6add..4843143 100644 --- 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 index a5eee41..7e9155d 100644 --- 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 index f7050cb..287de29 100644 --- a/src/hooks/useQueue/useQueue.demo.tsx +++ b/src/hooks/useQueue/useQueue.demo.tsx @@ -24,7 +24,14 @@ const Demo = () => { - diff --git a/src/hooks/useQueue/useQueue.ts b/src/hooks/useQueue/useQueue.ts index d38f3d6..f49aec5 100644 --- 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 { @@ -36,10 +37,13 @@ export const useQueue = (initialValue: Value[] = []): UseQueueReturn setQueue([]); const remove = () => { let removed; - setQueue(([first, ...rest]) => { - removed = first; - return rest; + flushSync(() => { + setQueue(([first, ...rest]) => { + removed = first; + return rest; + }); }); + return removed as Value; };