feat: add usePrevious hook (#103)

A hook that returns previous value of given state.

.changeset/spicy-peaches-decide.md

@@ -0,0 +1,5 @@
+---
+'@raddix/use-previous': major
+---
+
+Added the usePrevious hook

docs/_config.json

@@ -68,6 +68,10 @@
           "title": "useDebounce",
           "path": "/hooks/use-debounce"
         },
+        {
+          "title": "usePrevious",
+          "path": "/hooks/use-previous"
+        },
         {
           "title": "useToggle",
           "path": "/hooks/use-toggle"

docs/en/use-previous.mdx

@@ -0,0 +1,59 @@
+---
+title: usePrevious
+description: Returns previous value of given state.
+---
+
+## Installation
+
+Install the custom hook from your command line.
+
+<Snippet pkg text='@raddix/use-previous' />
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { usePrevious } from '@raddix/use-previous';
+
+export default function App() {
+  const [count, setCount] = useState(0)
+  const previousCount = usePrevious(count);
+
+  return (
+    <div>
+      <p>Current value: {count}</p>
+      <p>Previous value: {previousCount}</p>
+      <button onClick={() => setCount(count + 1)}>
+          Increment Count
+      </button>
+    </div>
+  )
+}
+```
+
+## API
+
+### Parameters
+
+<ApiTable
+  data={[
+    {
+      name: 'value',
+      type: 'any',
+      description: 'The value of the state.',
+      required: 'Yes'
+    }
+  ]}
+ />
+
+### Returns
+
+<ApiTable
+  data={[
+    {
+      name: 'previousValue',
+      type: 'any',
+      description: 'The previous value of given state.',
+    }
+  ]}
+ />

docs/es/use-previous.mdx

@@ -0,0 +1,59 @@
+---
+title: usePrevious
+description: Devuelve el valor anterior del estado dado.
+---
+
+## Instalación
+
+Instala el custom hook desde su linea de comando.
+
+<Snippet pkg text='@raddix/use-previous' />
+
+## Uso
+
+```tsx
+import { useState } from 'react';
+import { usePrevious } from '@raddix/use-previous';
+
+export default function App() {
+  const [count, setCount] = useState(0)
+  const previousCount = usePrevious(count);
+
+  return (
+    <div>
+      <p>Valor actual: {count}</p>
+      <p>Valor anterior: {previousCount}</p>
+      <button onClick={() => setCount(count + 1)}>
+          Increment Count
+      </button>
+    </div>
+  )
+}
+```
+
+## API
+
+### Parámetros
+
+<ApiTable
+  data={[
+    {
+      name: 'value',
+      type: 'any',
+      description: 'El valor del estado.',
+      required: 'Si'
+    }
+  ]}
+ />
+
+### Devuelve
+
+<ApiTable
+  data={[
+    {
+      name: 'previousValue',
+      type: 'any',
+      description: 'El valor anterior del estado dado.',
+    }
+  ]}
+ />

packages/hooks/use-previous/README.md

@@ -0,0 +1,5 @@
+# usePrevious
+
+A hook that returns previous value of given state.
+
+Please refer to the [documentation](https://raddix.dev/hooks/use-previous) for more information.

packages/hooks/use-previous/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@raddix/use-previous",
+  "description": "A hook that returns previous value of given state.",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "author": "Moises Machuca Valverde <rolan.machuca@gmail.com> (https://www.moisesmachuca.com)",
+  "homepage": "https://raddix.dev/hooks/use-previous",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gdvu/raddix.git"
+  },
+  "keywords": [
+    "react-hook",
+    "react-previous-hook",
+    "react-use-previous",
+    "use-previous",
+    "use-previous-hook",
+    "hook-previous"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint \"{src,tests}/*.{ts,tsx,css}\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "build": "tsup src --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/hooks/use-previous/src/index.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrevious = <T>(value: T): T | undefined => {
+  const previous = useRef<T>();
+
+  useEffect(() => {
+    previous.current = value;
+  }, [value]);
+
+  return previous.current;
+};

packages/hooks/use-previous/tests/index.test.ts

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react';
+import { usePrevious } from '../src';
+
+describe('usePrevious test:', () => {
+  it('should returns undefined on initial render', () => {
+    const { result } = renderHook(() => usePrevious(0));
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should return previous value', () => {
+    const { result, rerender } = renderHook(state => usePrevious(state), {
+      initialProps: 0
+    });
+
+    rerender(1);
+    expect(result.current).toBe(0);
+
+    rerender(2);
+    expect(result.current).toBe(1);
+  });
+});