Create useLatest

src/use-latest/README.md

@@ -0,0 +1,36 @@
+## 🪝 `useLatest`
+
+```ts
+function useLatest<T>(value: T): { current: T };
+```
+
+Returns a ref object whose `current` property always points to the latest version of the value.
+
+### 📕 Parameters
+
+-   `value` - The value to wrap in a ref.
+
+### 📗 Returns
+
+-   A ref object.
+
+### 📘 Example
+
+```tsx
+export default function Component() {
+	const [value, setValue] = useState(0);
+	const latestValue = useLatest(value);
+
+	useEffect(() => {
+		const connection = RunService.Heartbeat.Connect(() => {
+			print(latestValue.current);
+		});
+
+		return () => {
+			connection.Disconnect();
+		};
+	}, []);
+
+	return <frame />;
+}
+```

src/use-latest/index.ts

@@ -0,0 +1 @@
+export * from "./use-latest";

src/use-latest/use-latest.spec.ts

@@ -0,0 +1,21 @@
+/// <reference types="@rbxts/testez/globals" />
+
+import { renderHook } from "../utils/testez";
+import { useLatest } from "./use-latest";
+
+export = () => {
+	it("should return a mutable ref", () => {
+		const { result } = renderHook(() => useLatest(0));
+		expect(result.current.current).to.equal(0);
+	});
+
+	it("should update the ref when the value changes", () => {
+		const { result, rerender } = renderHook((props: { value: number }) => useLatest(props.value), {
+			initialProps: { value: 0 },
+		});
+
+		expect(result.current.current).to.equal(0);
+		rerender({ value: 1 });
+		expect(result.current.current).to.equal(1);
+	});
+};

src/use-latest/use-latest.ts

@@ -0,0 +1,12 @@
+import { useMutable } from "@rbxts/roact-hooked";
+
+/**
+ * Returns a mutable ref that always points to the latest value of the input.
+ * @param value The value to track.
+ * @returns A mutable reference to the value.
+ */
+export function useLatest<T>(value: T) {
+	const ref = useMutable(value);
+	ref.current = value;
+	return ref;
+}