[6팀 조영민] Chapter 1-3. React, Beyond the Basics

packages/app/src/components/toast/ToastProvider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
+import { createContext, memo, type PropsWithChildren, useCallback, useContext, useMemo, useReducer } from "react";
 import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
@@ -8,45 +8,43 @@ import { debounce } from "../../utils";
 type ShowToast = (message: string, type: ToastType) => void;
 type Hide = () => void;
 
-const ToastContext = createContext<{
-  message: string;
-  type: ToastType;
-  show: ShowToast;
-  hide: Hide;
-}>({
-  ...initialState,
-  show: () => null,
-  hide: () => null,
-});
+const ToastStateContext = createContext<{ message: string; type: ToastType }>(initialState);
+const ToastCommandContext = createContext<{ show: ShowToast; hide: Hide }>({ show: () => null, hide: () => null });
 
-const DEFAULT_DELAY = 3000;
+export const useToastState = () => useContext(ToastStateContext);
+export const useToastCommand = () => useContext(ToastCommandContext);
 
-const useToastContext = () => useContext(ToastContext);
-export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
-  return { show, hide };
-};
-export const useToastState = () => {
-  const { message, type } = useToastContext();
-  return { message, type };
-};
+const DEFAULT_DELAY = 3000;
 
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
+  const { show, hide } = useMemo(() => createActions(dispatch), []);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
 
-  const showWithHide: ShowToast = (...args) => {
-    show(...args);
-    hideAfter();
-  };
+  const showWithHide: ShowToast = useCallback(
+    (...args) => {
+      show(...args);
+      hideAfter();
+    },
+    [hideAfter, show],
+  );
+
+  const command = useMemo(
+    () => ({
+      show: showWithHide,
+      hide,
+    }),
+    [hide, showWithHide],
+  );
 
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastCommandContext value={command}>
+      <ToastStateContext value={state}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastStateContext>
+    </ToastCommandContext>
   );
 });

packages/lib/src/createObserver.ts

@@ -6,10 +6,8 @@ export const createObserver = () => {
   // useSyncExternalStore 에서 활용할 수 있도록 subscribe 함수를 수정합니다.
   const subscribe = (fn: Listener) => {
     listeners.add(fn);
-  };
 
-  const unsubscribe = (fn: Listener) => {
-    listeners.delete(fn);
+    return () => listeners.delete(fn);
   };
 
   const notify = () => listeners.forEach((listener) => listener());

packages/lib/src/equals/deepEquals.ts

@@ -1,3 +1,24 @@
-export const deepEquals = (a: unknown, b: unknown) => {
+import { isObject } from "./utils";
+
+export const deepEquals = (a: unknown, b: unknown): boolean => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false;
+    }
+
+    return a.every((item, index) => deepEquals(item, b[index]));
+  }
+
+  if (isObject(a) && isObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+
+    return aKeys.every((key) => deepEquals(a[key], b[key]));
+  }
+
   return a === b;
 };

packages/lib/src/equals/shallowEquals.ts

@@ -1,3 +1,24 @@
+import { isObject } from "./utils";
+
 export const shallowEquals = (a: unknown, b: unknown) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false;
+    }
+
+    return a.every((el, index) => el === b[index]);
+  }
+
+  if (isObject(a) && isObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+
+    return aKeys.every((key) => a[key] === b[key]);
+  }
+
   return a === b;
 };

packages/lib/src/equals/utils.ts

@@ -0,0 +1,3 @@
+export const isObject = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};

packages/lib/src/hocs/deepMemo.ts

@@ -1,5 +1,7 @@
 import type { FunctionComponent } from "react";
+import { deepEquals } from "../equals";
+import { memo } from "./memo";
 
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  return memo(Component, deepEquals);
 }

packages/lib/src/hocs/memo.ts

@@ -2,5 +2,17 @@ import { type FunctionComponent } from "react";
 import { shallowEquals } from "../equals";
 
 export function memo<P extends object>(Component: FunctionComponent<P>, equals = shallowEquals) {
-  return Component;
+  let prevProps: P | null = null;
+  let memoizedElement: ReturnType<typeof Component> | null = null;
+
+  const MemoizedComponent = (props: P) => {
+    if (!prevProps || !equals(prevProps, props)) {
+      prevProps = props;
+      memoizedElement = Component(props);
+    }
+
+    return memoizedElement;
+  };
+
+  return MemoizedComponent;
 }

packages/lib/src/hooks/useAutoCallback.ts

@@ -3,5 +3,13 @@ import { useCallback } from "./useCallback";
 import { useRef } from "./useRef";
 
 export const useAutoCallback = <T extends AnyFunction>(fn: T): T => {
-  return fn;
+  const fnRef = useRef(fn);
+
+  fnRef.current = fn;
+
+  const stableFn = useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return fnRef.current(...args);
+  }, []);
+
+  return stableFn as T;
 };

packages/lib/src/hooks/useCallback.ts

@@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-unsafe-function-type */
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 import type { DependencyList } from "react";
+import { useMemo } from "./useMemo";
 
 export function useCallback<T extends Function>(factory: T, _deps: DependencyList) {
-  // 직접 작성한 useMemo를 통해서 만들어보세요.
-  return factory as T;
+  return useMemo(() => factory, _deps);
 }

packages/lib/src/hooks/useMemo.ts

@@ -1,8 +1,23 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { DependencyList } from "react";
+import { useRef } from "./useRef";
 import { shallowEquals } from "../equals";
 
 export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T {
-  // 직접 작성한 useRef를 통해서 만들어보세요.
-  return factory();
+  const ref = useRef<{
+    deps: DependencyList;
+    value: T | undefined;
+    initialized: boolean;
+  }>({
+    deps: [],
+    value: undefined,
+    initialized: false,
+  });
+
+  if (!ref.current.initialized || !_equals(ref.current.deps, _deps)) {
+    ref.current.value = factory();
+    ref.current.deps = _deps;
+    ref.current.initialized = true;
+  }
+
+  return ref.current.value as T;
 }

packages/lib/src/hooks/useRef.ts

@@ -1,4 +1,9 @@
-export function useRef<T>(initialValue: T): { current: T } {
-  // useState를 이용해서 만들어보세요.
-  return { current: initialValue };
+import { useState } from "react";
+
+type Ref<T> = { current: T };
+
+export function useRef<T>(initialValue: T): Ref<T> {
+  const [ref] = useState<Ref<T>>(() => ({ current: initialValue }));
+
+  return ref;
 }

packages/lib/src/hooks/useRouter.ts

@@ -6,7 +6,7 @@ import { useShallowSelector } from "./useShallowSelector";
 const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
-  // useSyncExternalStore를 사용하여 router의 상태를 구독하고 가져오는 훅을 구현합니다.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(router);
+
+  return useSyncExternalStore(router.subscribe, () => shallowSelector(router));
 };

packages/lib/src/hooks/useShallowSelector.ts

@@ -4,6 +4,17 @@ import { shallowEquals } from "../equals";
 type Selector<T, S = T> = (state: T) => S;
 
 export const useShallowSelector = <T, S = T>(selector: Selector<T, S>) => {
-  // 이전 상태를 저장하고, shallowEquals를 사용하여 상태가 변경되었는지 확인하는 훅을 구현합니다.
-  return (state: T): S => selector(state);
+  const prevSelectedRef = useRef<S>(null);
+  const hasInitialized = useRef(false);
+
+  return (state: T): S => {
+    const selected = selector(state);
+
+    if (!hasInitialized.current || !shallowEquals(prevSelectedRef.current, selected)) {
+      hasInitialized.current = true;
+      prevSelectedRef.current = selected;
+    }
+
+    return prevSelectedRef.current as S;
+  };
 };

packages/lib/src/hooks/useShallowState.ts

@@ -1,7 +1,19 @@
 import { useState } from "react";
 import { shallowEquals } from "../equals";
+import { useCallback } from "./useCallback";
 
-export const useShallowState = <T>(initialValue: Parameters<typeof useState<T>>[0]) => {
-  // useState를 사용하여 상태를 관리하고, shallowEquals를 사용하여 상태 변경을 감지하는 훅을 구현합니다.
-  return useState(initialValue);
+export const useShallowState = <T>(initialValue: T | (() => T)) => {
+  const [state, setState] = useState<T>(initialValue);
+
+  const setShallowState = useCallback((next: T) => {
+    setState((prev) => {
+      if (shallowEquals(prev, next)) {
+        return prev;
+      }
+
+      return next;
+    });
+  }, []);
+
+  return [state, setShallowState] as const;
 };

packages/lib/src/hooks/useStorage.ts

@@ -4,6 +4,5 @@ import type { createStorage } from "../createStorage";
 type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
-  // useSyncExternalStore를 사용해서 storage의 상태를 구독하고 가져오는 훅을 구현해보세요.
-  return storage.get();
+  return useSyncExternalStore(storage.subscribe, storage.get, storage.get);
 };

packages/lib/src/hooks/useStore.ts

@@ -7,7 +7,7 @@ type Store<T> = ReturnType<typeof createStore<T>>;
 const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
-  // useSyncExternalStore와 useShallowSelector를 사용해서 store의 상태를 구독하고 가져오는 훅을 구현해보세요.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(store.getState());
+
+  return useSyncExternalStore(store.subscribe, () => shallowSelector(store.getState()));
 };