Merge pull request #245 from VLADISLAW9/#243

#243 add use last changed hook, add demo for hook

src/hooks/index.ts

@@ -42,6 +42,7 @@ export * from './useKeyboard/useKeyboard';
 export * from './useKeyPress/useKeyPress';
 export * from './useKeyPressEvent/useKeyPressEvent';
 export * from './useKeysPressed/useKeysPressed';
+export * from './useLastChanged/useLastChanged';
 export * from './useList/useList';
 export * from './useLocalStorage/useLocalStorage';
 export * from './useLogger/useLogger';

src/hooks/useLastChanged/useLastChanged.demo.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { useLastChanged } from './useLastChanged';
+
+const Demo = () => {
+  const [inputValue, setInputValue] = useState('');
+  const value = useLastChanged(inputValue);
+
+  return (
+    <div>
+      <input
+        placeholder='Type something...'
+        onChange={(event) => setInputValue(event.target.value)}
+        value={inputValue}
+      />
+      <p>Last changed: {value}</p>
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useLastChanged/useLastChanged.test.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react';
+
+import { useLastChanged } from './useLastChanged';
+
+it('Should use last changed', () => {
+  const { result } = renderHook(useLastChanged);
+
+  expect(result.current).toBeNull();
+});
+
+it('Should return timestamp when value changes', () => {
+  const { result, rerender } = renderHook((text = 'init text') => useLastChanged(text));
+
+  rerender('changed text');
+
+  expect(result.current).toBeCloseTo(Date.now(), -1);
+});
+
+it('Should return initial value', () => {
+  const initialValue = Date.now();
+
+  const { result } = renderHook(() => useLastChanged(null, { initialValue }));
+
+  expect(result.current).toBe(initialValue);
+});

src/hooks/useLastChanged/useLastChanged.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+import { useDidUpdate } from '../useDidUpdate/useDidUpdate';
+
+/** The use last changed options type  */
+export interface UseLastChangedOptions {
+  initialValue?: number;
+}
+
+/**
+ * @name useLastChanged
+ * @description - Hook for records the timestamp of the last change
+ * @category Time
+ *
+ * @param {any} source  The source of the last change
+ * @param {number | null} [options.initialValue=null] The initial value
+ * @returns {number | null} Return timestamp of the last change
+ *
+ * @example
+ * const lastChanged = useLastChanged(source);
+ */
+export const useLastChanged = (source: any, options?: UseLastChangedOptions): number | null => {
+  const [lastChanged, setLastChanged] = useState(options?.initialValue ?? null);
+
+  useDidUpdate(() => setLastChanged(Date.now()), [source]);
+
+  return lastChanged;
+};