From c065ab1f9b7cb7f6dcd6f48f2054b95d98cf55b6 Mon Sep 17 00:00:00 2001 From: Tyler McGinnis Date: Mon, 28 Aug 2023 15:32:40 -0600 Subject: [PATCH 1/3] Update usePrevious --- index.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index f54b0df..1025a2d 100644 --- a/index.js +++ b/index.js @@ -998,14 +998,16 @@ export function usePreferredLanguage() { ); } -export function usePrevious(newValue) { - const previousRef = React.useRef(); +export function usePrevious(value) { + const [current, setCurrent] = React.useState(value); + const [previous, setPrevious] = React.useState(null); - React.useEffect(() => { - previousRef.current = newValue; - }); + if (value !== current) { + setPrevious(current); + setCurrent(value); + } - return previousRef.current; + return previous; } export function useQueue(initialValue = []) { From 78360d3a73ac3fb9f7d42113fdeb95eb3dc098d9 Mon Sep 17 00:00:00 2001 From: Tyler McGinnis Date: Tue, 29 Aug 2023 08:14:59 -0600 Subject: [PATCH 2/3] Refactor useLongPress --- index.js | 49 +++++++++++++++++-------------------------------- 1 file changed, 17 insertions(+), 32 deletions(-) diff --git a/index.js b/index.js index 1025a2d..d6a8960 100644 --- a/index.js +++ b/index.js @@ -640,23 +640,18 @@ export function useLockBodyScroll() { }, []); } -export function useLongPress( - callback, - { threshold = 400, onStart, onFinish, onCancel } = {} -) { +export function useLongPress(callback, options = {}) { + const { threshold = 400, onStart, onFinish, onCancel } = options; const isLongPressActive = React.useRef(false); const isPressed = React.useRef(false); const timerId = React.useRef(); - const cbRef = React.useRef(callback); - React.useLayoutEffect(() => { - cbRef.current = callback; - }); - - const start = React.useCallback( - () => (event) => { - if (isPressed.current) return; + return React.useMemo(() => { + if (typeof callback !== "function") { + return {}; + } + const start = (event) => { if (!isMouseEvent(event) && !isTouchEvent(event)) return; if (onStart) { @@ -665,15 +660,12 @@ export function useLongPress( isPressed.current = true; timerId.current = setTimeout(() => { - cbRef.current(event); + callback(event); isLongPressActive.current = true; }, threshold); - }, - [onStart, threshold] - ); + }; - const cancel = React.useCallback( - () => (event) => { + const cancel = (event) => { if (!isMouseEvent(event) && !isTouchEvent(event)) return; if (isLongPressActive.current) { @@ -692,31 +684,24 @@ export function useLongPress( if (timerId.current) { window.clearTimeout(timerId.current); } - }, - [onFinish, onCancel] - ); - - return React.useMemo(() => { - if (callback === null) { - return {}; - } + }; const mouseHandlers = { - onMouseDown: start(), - onMouseUp: cancel(), - onMouseLeave: cancel(), + onMouseDown: start, + onMouseUp: cancel, + onMouseLeave: cancel, }; const touchHandlers = { - onTouchStart: start(), - onTouchEnd: cancel(), + onTouchStart: start, + onTouchEnd: cancel, }; return { ...mouseHandlers, ...touchHandlers, }; - }, [callback, cancel, start]); + }, [callback, threshold, onCancel, onFinish, onStart]); } export function useMap(initialState) { From 3529e5c0061bb673ee6acecdf235606b2eb34463 Mon Sep 17 00:00:00 2001 From: Tyler McGinnis Date: Tue, 29 Aug 2023 10:47:28 -0600 Subject: [PATCH 3/3] Refactor useScript --- index.js | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/index.js b/index.js index d6a8960..e0e0dc1 100644 --- a/index.js +++ b/index.js @@ -1075,9 +1075,7 @@ export function useScript(src, options = {}) { const cachedScriptStatuses = React.useRef({}); React.useEffect(() => { - if (!src) { - return; - } + if (!src) return; const cachedScriptStatus = cachedScriptStatuses.current[src]; if (cachedScriptStatus === "ready" || cachedScriptStatus === "error") { @@ -1088,26 +1086,12 @@ export function useScript(src, options = {}) { let script = document.querySelector(`script[src="${src}"]`); if (script) { - setStatus( - script.getAttribute("data-status") ?? cachedScriptStatus ?? "loading" - ); + setStatus(cachedScriptStatus ?? "loading"); } else { script = document.createElement("script"); script.src = src; script.async = true; - script.setAttribute("data-status", "loading"); document.body.appendChild(script); - - const setAttributeFromEvent = (event) => { - const scriptStatus = event.type === "load" ? "ready" : "error"; - - if (script) { - script.setAttribute("data-status", scriptStatus); - } - }; - - script.addEventListener("load", setAttributeFromEvent); - script.addEventListener("error", setAttributeFromEvent); } const setStateFromEvent = (event) => {