diff --git a/src/index.ts b/src/index.ts index 9faecab..78acdd7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,8 +15,8 @@ export * from "./use-event-listener"; export * from "./use-interval"; export * from "./use-key-press"; export * from "./use-latest"; +export * from "./use-latest-callback"; export * from "./use-lifetime"; -export * from "./use-memoized-callback"; export * from "./use-mount-effect"; export * from "./use-mouse"; export * from "./use-previous"; diff --git a/src/use-binding-listener/use-binding-listener.ts b/src/use-binding-listener/use-binding-listener.ts index d8705c2..a8b87a3 100644 --- a/src/use-binding-listener/use-binding-listener.ts +++ b/src/use-binding-listener/use-binding-listener.ts @@ -1,6 +1,6 @@ import { Binding } from "@rbxts/roact"; import { useEffect, useMemo } from "@rbxts/roact-hooked"; -import { useMemoizedCallback } from "../use-memoized-callback"; +import { useLatestCallback } from "../use-latest-callback"; import { getBindingApi, isBinding } from "../utils/binding"; /** @@ -19,7 +19,7 @@ export function useBindingListener(binding: T | Binding, listener: (value: return isBinding(binding) ? getBindingApi(binding) : undefined; }, [binding]); - const listenerCallback = useMemoizedCallback(listener); + const listenerCallback = useLatestCallback(listener); useEffect(() => { if (api) { diff --git a/src/use-interval/use-interval.ts b/src/use-interval/use-interval.ts index a0e27b2..cd0be6b 100644 --- a/src/use-interval/use-interval.ts +++ b/src/use-interval/use-interval.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMutable } from "@rbxts/roact-hooked"; import { setInterval } from "@rbxts/set-timeout"; -import { useMemoizedCallback } from "../use-memoized-callback"; +import { useLatestCallback } from "../use-latest-callback"; export interface UseIntervalOptions { /** @@ -22,7 +22,7 @@ export interface UseIntervalOptions { export function useInterval(callback: () => void, delay?: number, options: UseIntervalOptions = {}) { const { immediate = false } = options; - const callbackMemo = useMemoizedCallback(callback); + const callbackMemo = useLatestCallback(callback); const cancel = useMutable<() => void>(); const clear = useCallback(() => { diff --git a/src/use-memoized-callback/README.md b/src/use-latest-callback/README.md similarity index 81% rename from src/use-memoized-callback/README.md rename to src/use-latest-callback/README.md index dbb3c4d..5e7a51f 100644 --- a/src/use-memoized-callback/README.md +++ b/src/use-latest-callback/README.md @@ -1,7 +1,7 @@ -## 🪝 `useMemoizedCallback` +## 🪝 `useLatestCallback` ```ts -function useMemoizedCallback(callback: T): T; +function useLatestCallback(callback: T): T; ``` Returns a memoized callback that always points to the latest version of the callback. @@ -24,7 +24,7 @@ interface Props { } function Stepper({ onStep }: Props) { - const onStepCallback = useMomoizedCallback(onStep); + const onStepCallback = useLatestCallback(onStep); useEffect(() => { // Will always call the latest version of `onStep` diff --git a/src/use-latest-callback/index.ts b/src/use-latest-callback/index.ts new file mode 100644 index 0000000..e4d170c --- /dev/null +++ b/src/use-latest-callback/index.ts @@ -0,0 +1 @@ +export * from "./use-latest-callback"; diff --git a/src/use-memoized-callback/use-memoized-callback.spec.ts b/src/use-latest-callback/use-latest-callback.spec.ts similarity index 71% rename from src/use-memoized-callback/use-memoized-callback.spec.ts rename to src/use-latest-callback/use-latest-callback.spec.ts index 2150da6..224cfda 100644 --- a/src/use-memoized-callback/use-memoized-callback.spec.ts +++ b/src/use-latest-callback/use-latest-callback.spec.ts @@ -1,25 +1,25 @@ /// import { renderHook } from "../utils/testez"; -import { useMemoizedCallback } from "./use-memoized-callback"; +import { useLatestCallback } from "./use-latest-callback"; export = () => { it("should memoize the callback on mount", () => { const callback = () => {}; - const { result } = renderHook(() => useMemoizedCallback(callback)); + const { result } = renderHook(() => useLatestCallback(callback)); expect(result.current).to.be.a("function"); expect(result.current).never.to.equal(callback); }); it("should return memoized callback after unrelated rerender", () => { - const { result, rerender } = renderHook(() => useMemoizedCallback(() => {})); + const { result, rerender } = renderHook(() => useLatestCallback(() => {})); const memoizedCallback = result.current; rerender(); expect(result.current).to.equal(memoizedCallback); }); it("should return memoized callback after passed callback changes", () => { - const { result, rerender } = renderHook(({ callback }) => useMemoizedCallback(callback), { + const { result, rerender } = renderHook(({ callback }) => useLatestCallback(callback), { initialProps: { callback: () => {} }, }); const memoizedCallback = result.current; @@ -29,8 +29,8 @@ export = () => { expect(result.current).to.equal(memoizedCallback); }); - it("should memoize the passed callback", () => { - const { result, rerender } = renderHook(({ callback }) => useMemoizedCallback(callback), { + it("should memoize new callbacks", () => { + const { result, rerender } = renderHook(({ callback }) => useLatestCallback(callback), { initialProps: { callback: (a: number, b: number) => a + b, }, diff --git a/src/use-memoized-callback/use-memoized-callback.ts b/src/use-latest-callback/use-latest-callback.ts similarity index 84% rename from src/use-memoized-callback/use-memoized-callback.ts rename to src/use-latest-callback/use-latest-callback.ts index 0ed31f5..ba93991 100644 --- a/src/use-memoized-callback/use-memoized-callback.ts +++ b/src/use-latest-callback/use-latest-callback.ts @@ -6,7 +6,7 @@ import { useCallback, useMutable } from "@rbxts/roact-hooked"; * @param callback The callback to memoize. * @returns The memoized callback. */ -export function useMemoizedCallback(callback: T): T { +export function useLatestCallback(callback: T): T { const callbackRef = useMutable(callback); callbackRef.current = callback; diff --git a/src/use-memoized-callback/index.ts b/src/use-memoized-callback/index.ts deleted file mode 100644 index d24dc0f..0000000 --- a/src/use-memoized-callback/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./use-memoized-callback"; diff --git a/src/use-timeout/use-timeout.ts b/src/use-timeout/use-timeout.ts index 8d158bd..b6ce8a2 100644 --- a/src/use-timeout/use-timeout.ts +++ b/src/use-timeout/use-timeout.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMutable } from "@rbxts/roact-hooked"; import { setTimeout } from "@rbxts/set-timeout"; -import { useMemoizedCallback } from "../use-memoized-callback"; +import { useLatestCallback } from "../use-latest-callback"; /** * Sets a timeout that runs the callback function after `delay` seconds. If @@ -11,7 +11,7 @@ import { useMemoizedCallback } from "../use-memoized-callback"; * @returns A function that clears the timeout. */ export function useTimeout(callback: () => void, delay?: number) { - const callbackMemo = useMemoizedCallback(callback); + const callbackMemo = useLatestCallback(callback); const cancel = useMutable<() => void>(); const clear = useCallback(() => {