main 🧊 rework use latest hook

Author: debabin

packages/core/src/bundle/hooks/useLatest/useLatest.js

@@ -1,18 +1,26 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 /**
  * @name useLatest
  * @description - Hook that returns the stable reference of the value
  * @category Utilities
  *
  * @template Value The type of the value
  * @param {Value} value The value to get the previous value
- * @returns {Value} The previous value
+ * @returns {UseLatestReturn<Value>} The previous value
  *
  * @example
  * const latestValue = useLatest(value);
  */
 export const useLatest = (value) => {
   const valueRef = useRef(value);
   valueRef.current = value;
-  return valueRef.current;
+  return useMemo(
+    () => ({
+      get value() {
+        return valueRef.current;
+      },
+      ref: valueRef
+    }),
+    []
+  );
 };

packages/core/src/hooks/useLatest/useLatest.demo.tsx

@@ -1,13 +1,22 @@
 import { useCounter, useLatest } from '@siberiacancode/reactuse';
+import { useEffect } from 'react';
 
 const Demo = () => {
   const counter = useCounter();
   const latestCount = useLatest(counter.value);
 
+  useEffect(() => {
+    console.log('latestCount', latestCount.value);
+    setInterval(() => {
+      console.log('latestCount', latestCount.value);
+    }, 1000);
+  }, []);
+
   return (
     <div>
       <p>
-        You clicked <code>{counter.value}</code> times, latest count is <code>{latestCount}</code>
+        You clicked <code>{counter.value}</code> times, latest count is{' '}
+        <code>{latestCount.value}</code>
       </p>
 
       <button className='button' type='button' onClick={() => counter.inc()}>

packages/core/src/hooks/useLatest/useLatest.test.ts

@@ -5,7 +5,8 @@ import { useLatest } from './useLatest';
 it('Should use latest', () => {
   const { result } = renderHook(() => useLatest('value'));
 
-  expect(result.current).toBe('value');
+  expect(result.current.value).toBe('value');
+  expect(result.current.ref.current).toBe('value');
 });
 
 it('Should maintain reference stability', () => {
@@ -14,5 +15,6 @@ it('Should maintain reference stability', () => {
   });
 
   rerender('newValue');
-  expect(result.current).toEqual('newValue');
+  expect(result.current.value).toEqual('newValue');
+  expect(result.current.ref.current).toEqual('newValue');
 });

packages/core/src/hooks/useLatest/useLatest.ts

@@ -1,4 +1,11 @@
-import { useRef } from 'react';
+import type { RefObject } from 'react';
+
+import { useMemo, useRef } from 'react';
+
+export interface UseLatestReturn<Value> {
+  ref: RefObject<Value>;
+  value: Value;
+}
 
 /**
  * @name useLatest
@@ -7,13 +14,21 @@ import { useRef } from 'react';
  *
  * @template Value The type of the value
  * @param {Value} value The value to get the previous value
- * @returns {Value} The previous value
+ * @returns {UseLatestReturn<Value>} The previous value
  *
  * @example
  * const latestValue = useLatest(value);
  */
-export const useLatest = <Value>(value: Value) => {
+export const useLatest = <Value>(value: Value): UseLatestReturn<Value> => {
   const valueRef = useRef<Value>(value);
   valueRef.current = value;
-  return valueRef.current;
+  return useMemo(
+    () => ({
+      get value() {
+        return valueRef.current;
+      },
+      ref: valueRef
+    }),
+    []
+  );
 };