refactor: seperate the usePrevious module (#1208)

# Overview

closed: #1166 

Seperate the module as discussed in the issue above 🙏

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <[email protected]>

Author: ssi02014

.changeset/weak-grapes-act.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+refactor: seperate the usePrevious module

packages/react/src/hooks/useIsChanged.spec.ts

@@ -1,28 +1,6 @@
 import { renderHook } from '@testing-library/react'
-import { usePrevious } from './useIsChanged'
 import { useIsChanged } from '.'
 
-describe('usePrevious', () => {
-  it('should return value given as an argument in the previous rendering', () => {
-    const { result, rerender } = renderHook<{ now: number; prev: number }, { count: number }>(
-      ({ count }) => ({ prev: usePrevious(count), now: count }),
-      { initialProps: { count: 0 } }
-    )
-
-    rerender({ count: 1 })
-    expect(result.current.prev).toBe(0)
-    expect(result.current.now).toBe(1)
-
-    rerender({ count: 2 })
-    expect(result.current.prev).toBe(1)
-    expect(result.current.now).toBe(2)
-
-    rerender({ count: 3 })
-    expect(result.current.prev).toBe(2)
-    expect(result.current.now).toBe(3)
-  })
-})
-
 describe('useIsChanged', () => {
   it('should return boolean that express if given argument is changed value on previous render', () => {
     const { result, rerender } = renderHook<boolean, { count: number }>(({ count }) => useIsChanged(count), {

packages/react/src/hooks/useIsChanged.ts

@@ -1,13 +1,3 @@
-import { useEffect, useRef } from 'react'
-
-export const usePrevious = <TValue>(value: TValue): TValue => {
-  const ref = useRef<TValue>(value)
-
-  useEffect(() => {
-    ref.current = value
-  }, [value])
-
-  return ref.current
-}
+import { usePrevious } from './usePrevious'
 
 export const useIsChanged = (value: unknown) => usePrevious(value) !== value

packages/react/src/hooks/usePrevious.spec.ts

@@ -0,0 +1,23 @@
+import { renderHook } from '@testing-library/react'
+import { usePrevious } from './usePrevious'
+
+describe('usePrevious', () => {
+  it('should return value given as an argument in the previous rendering', () => {
+    const { result, rerender } = renderHook<{ now: number; prev: number }, { count: number }>(
+      ({ count }) => ({ prev: usePrevious(count), now: count }),
+      { initialProps: { count: 0 } }
+    )
+
+    rerender({ count: 1 })
+    expect(result.current.prev).toBe(0)
+    expect(result.current.now).toBe(1)
+
+    rerender({ count: 2 })
+    expect(result.current.prev).toBe(1)
+    expect(result.current.now).toBe(2)
+
+    rerender({ count: 3 })
+    expect(result.current.prev).toBe(2)
+    expect(result.current.now).toBe(3)
+  })
+})

packages/react/src/hooks/usePrevious.ts

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