[2팀 이진희] Chapter 1-3. 프레임워크 없이 SPA 만들기

packages/lib/src/hooks/useShallowState.ts

@@ -1,7 +1,21 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { useCallback } from "./useCallback";
 import { shallowEquals } from "../equals";
 
 export const useShallowState = <T>(initialValue: Parameters<typeof useState<T>>[0]) => {
-  // useState를 사용하여 상태를 관리하고, shallowEquals를 사용하여 상태 변경을 감지하는 훅을 구현합니다.
-  return useState(initialValue);
+  const [state, _setState] = useState<T | undefined>(initialValue);
+  const curState = useRef<T>(state); //setState 메모이제이션용. state를 의존해서는 안됨. -> 매번 리렌더링 됨
+
+  curState.current = state;
+
+  const setState = useCallback((updater: T | ((prev: T) => T)) => {
+    const newValue =
+      typeof updater === "function" ? (updater as (prev: T | undefined) => T)(curState.current) : updater;
+
+    if (!shallowEquals(newValue, curState.current)) {
+      _setState(newValue);
+    }
+  }, []);
+
+  return [state, setState];
 };