diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index dade8286..05a21a6e 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -2,6 +2,8 @@
 
 ### 배포 링크
 
+https://hwirin-kim.github.io/front_6th_chapter1-3/
+
 <!--
 배포 링크를 적어주세요
 예시: https://<username>.github.io/front-6th-chapter1-3/
@@ -14,41 +16,43 @@
 
 #### equalities
 
-- [ ] shallowEquals 구현 완료
-- [ ] deepEquals 구현 완료
+- [x] shallowEquals 구현 완료
+- [x] deepEquals 구현 완료
 
 #### hooks
 
-- [ ] useRef 구현 완료
-- [ ] useMemo 구현 완료
-- [ ] useCallback 구현 완료
-- [ ] useDeepMemo 구현 완료
-- [ ] useShallowState 구현 완료
-- [ ] useAutoCallback 구현 완료
+- [x] useRef 구현 완료
+- [x] useMemo 구현 완료
+- [x] useCallback 구현 완료
+- [x] useDeepMemo 구현 완료
+- [x] useShallowState 구현 완료
+- [x] useAutoCallback 구현 완료
 
 #### High Order Components
 
-- [ ] memo 구현 완료
-- [ ] deepMemo 구현 완료
+- [x] memo 구현 완료
+- [x] deepMemo 구현 완료
 
 ### 심화 과제
 
 #### hooks
 
-- [ ] createObserver를 useSyncExternalStore에 사용하기 적합한 코드로 개선
-- [ ] useShallowSelector 구현
-- [ ] useStore 구현
-- [ ] useRouter 구현
-- [ ] useStorage 구현
+- [x] createObserver를 useSyncExternalStore에 사용하기 적합한 코드로 개선
+- [x] useShallowSelector 구현
+- [x] useStore 구현
+- [x] useRouter 구현
+- [x] useStorage 구현
 
 ### context
 
-- [ ] ToastContext, ModalContext 개선
+- [x] ToastContext, ModalContext 개선
 
 ## 과제 셀프회고
 
 <!-- 과제에 대한 회고를 작성해주세요 -->
 
+이번 과제에서는 여러가지 리액트 훅을 만들어보았다.
+
 ### 기술적 성장
 
 <!-- 예시
@@ -142,7 +146,7 @@
 
 과제에서 디테일한 피드백을 받기 위해선 여러분의 생각을 디테일하게 표현해주셔야 한답니다.
 
-가령, "전반적으로 이 라우터 구조가 규모가 커졌을 때 유지보수나 기능 확장에 유리한지, 아니면 리팩토링이 필요할지 조언을 받고 싶습니다" 라는 질문이 있을 때, 답변드리기가 어려워요. 
+가령, "전반적으로 이 라우터 구조가 규모가 커졌을 때 유지보수나 기능 확장에 유리한지, 아니면 리팩토링이 필요할지 조언을 받고 싶습니다" 라는 질문이 있을 때, 답변드리기가 어려워요.
 이럴 때는 "기능 확장" 상황을 먼저 가정해봐야합니다. 테스트의 엣지케이스를 작성하는 것 처럼요! 그리고 그 상황에 대해 내가 작성한 코드가 이러저러한 이유 때문에 대응가능할 것 같은데 혹시 더 고려해야할 부분이 있을지를 물어보는거죠.
 
 이건 코치에게 이야기할 때 뿐만 아니라 팀원에게 이야기할 때에도 동일해요. 여러분의 컨텍스트를 명확하게 전달하지 않으면 여러분과 이야기할 때 시간이 무척 오래 걸린답니다.
diff --git a/eslint.config.js b/eslint.config.js
index 0710b6b6..3fe87dcb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -12,4 +12,9 @@ export default tseslint.config([
   ...tseslint.configs.recommended,
   eslintPluginPrettier,
   eslintConfigPrettier,
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
 ]);
diff --git a/packages/app/src/components/toast/ToastProvider.tsx b/packages/app/src/components/toast/ToastProvider.tsx
index 0aed9451..b144b580 100644
--- a/packages/app/src/components/toast/ToastProvider.tsx
+++ b/packages/app/src/components/toast/ToastProvider.tsx
@@ -4,49 +4,64 @@ import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
 import { debounce } from "../../utils";
+import { useCallback, useMemo } from "@hanghae-plus/lib/src/hooks";
 
 type ShowToast = (message: string, type: ToastType) => void;
 type Hide = () => void;
 
-const ToastContext = createContext<{
+// 상태 컨텍스트
+const ToastStateContext = createContext<{
   message: string;
   type: ToastType;
+}>({
+  ...initialState,
+});
+
+// 액션 컨텍스트
+const ToastActionContext = createContext<{
   show: ShowToast;
   hide: Hide;
 }>({
-  ...initialState,
   show: () => null,
   hide: () => null,
 });
 
 const DEFAULT_DELAY = 3000;
 
-const useToastContext = () => useContext(ToastContext);
-export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
-  return { show, hide };
-};
-export const useToastState = () => {
-  const { message, type } = useToastContext();
-  return { message, type };
-};
+export const useToastCommand = () => useContext(ToastActionContext);
+export const useToastState = () => useContext(ToastStateContext);
 
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
+
+  // 메모이제이션 처리
+  const { show, hide } = useMemo(() => createActions(dispatch), [dispatch]);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  // 메모이제이션 처리
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
+
+  // 메모이제이션 처리
+  const showWithHide: ShowToast = useCallback(
+    (...args) => {
+      show(...args);
+      hideAfter();
+    },
+    [show, hideAfter],
+  );
+
+  // 상태만 메모이제이션 처리
+  const memoizedStateValue = useMemo(() => ({ message: state.message, type: state.type }), [state.message, state.type]);
 
-  const showWithHide: ShowToast = (...args) => {
-    show(...args);
-    hideAfter();
-  };
+  // 액션만 메모이제이션 처리
+  const memoizedActionValue = useMemo(() => ({ show: showWithHide, hide }), [showWithHide, hide]);
 
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastStateContext.Provider value={memoizedStateValue}>
+      <ToastActionContext.Provider value={memoizedActionValue}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastActionContext.Provider>
+    </ToastStateContext.Provider>
   );
 });
diff --git a/packages/lib/src/Router.ts b/packages/lib/src/Router.ts
index eb3bd157..c4c078c2 100644
--- a/packages/lib/src/Router.ts
+++ b/packages/lib/src/Router.ts
@@ -65,6 +65,7 @@ export class Router<Handler extends (...args: any[]) => any> {
   }
 
   readonly subscribe = this.#observer.subscribe;
+  readonly unsubscribe = this.#observer.unsubscribe;
 
   addRoute(path: string, handler: Handler) {
     // 경로 패턴을 정규식으로 변환
diff --git a/packages/lib/src/createObserver.ts b/packages/lib/src/createObserver.ts
index fe97bf6b..865e411a 100644
--- a/packages/lib/src/createObserver.ts
+++ b/packages/lib/src/createObserver.ts
@@ -14,5 +14,5 @@ export const createObserver = () => {
 
   const notify = () => listeners.forEach((listener) => listener());
 
-  return { subscribe, notify };
+  return { subscribe, notify, unsubscribe };
 };
diff --git a/packages/lib/src/createStorage.ts b/packages/lib/src/createStorage.ts
index fdf2986c..78424d7e 100644
--- a/packages/lib/src/createStorage.ts
+++ b/packages/lib/src/createStorage.ts
@@ -2,7 +2,7 @@ import { createObserver } from "./createObserver.ts";
 
 export const createStorage = <T>(key: string, storage = window.localStorage) => {
   let data: T | null = JSON.parse(storage.getItem(key) ?? "null");
-  const { subscribe, notify } = createObserver();
+  const { subscribe, notify, unsubscribe } = createObserver();
 
   const get = () => data;
 
@@ -26,5 +26,5 @@ export const createStorage = <T>(key: string, storage = window.localStorage) =>
     }
   };
 
-  return { get, set, reset, subscribe };
+  return { get, set, reset, subscribe, unsubscribe };
 };
diff --git a/packages/lib/src/createStore.ts b/packages/lib/src/createStore.ts
index c2e854b4..564d2073 100644
--- a/packages/lib/src/createStore.ts
+++ b/packages/lib/src/createStore.ts
@@ -4,7 +4,7 @@ export const createStore = <S, A = (args: { type: string; payload?: unknown }) =
   reducer: (state: S, action: A) => S,
   initialState: S,
 ) => {
-  const { subscribe, notify } = createObserver();
+  const { subscribe, notify, unsubscribe } = createObserver();
 
   let state = initialState;
 
@@ -18,5 +18,5 @@ export const createStore = <S, A = (args: { type: string; payload?: unknown }) =
     }
   };
 
-  return { getState, dispatch, subscribe };
+  return { getState, dispatch, subscribe, unsubscribe };
 };
diff --git a/packages/lib/src/equals/deepEquals.ts b/packages/lib/src/equals/deepEquals.ts
index f5f4ebd5..c5053c04 100644
--- a/packages/lib/src/equals/deepEquals.ts
+++ b/packages/lib/src/equals/deepEquals.ts
@@ -1,3 +1,36 @@
+import { isPlainObject } from "../utils/typeChecker";
+
 export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 원시 데이터 타입 비교
+  if (Object.is(a, b)) return true;
+
+  // 배열 비교
+  if (Array.isArray(a) && Array.isArray(b)) {
+    // 길이가 다르면 false
+    if (a.length !== b.length) return false;
+    // 요소를 하나씩 비교
+    for (let i = 0; i < a.length; i++) {
+      // 요소가 다르면 false
+      if (!deepEquals(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  // 객체 비교
+  if (isPlainObject(a) && isPlainObject(b)) {
+    // 객체 키의 개수가 다르면 false
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    // 객체 키를 하나씩 비교
+    for (let i = 0; i < aKeys.length; i++) {
+      const currentKey = aKeys[i];
+      // 객체 키가 다르면 false
+      if (!deepEquals(a[currentKey], b[currentKey])) return false;
+    }
+    return true;
+  }
+
+  // 객체 비교
+  return false;
 };
diff --git a/packages/lib/src/equals/shallowEquals.ts b/packages/lib/src/equals/shallowEquals.ts
index 1cf22130..2b5bad68 100644
--- a/packages/lib/src/equals/shallowEquals.ts
+++ b/packages/lib/src/equals/shallowEquals.ts
@@ -1,3 +1,36 @@
+import { isPlainObject } from "../utils/typeChecker";
+
 export const shallowEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 원시 데이터 타입 비교
+  if (Object.is(a, b)) return true;
+
+  // 배열 비교
+  if (Array.isArray(a) && Array.isArray(b)) {
+    // 길이가 다르면 false
+    if (a.length !== b.length) return false;
+    // 요소를 하나씩 비교
+    for (let i = 0; i < a.length; i++) {
+      // 요소가 다르면 false
+      if (!Object.is(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  // 객체 비교
+  if (isPlainObject(a) && isPlainObject(b)) {
+    // 객체 키의 개수가 다르면 false
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    // 객체 키를 하나씩 비교
+    for (let i = 0; i < aKeys.length; i++) {
+      const currentKey = aKeys[i];
+      // 객체 키가 다르면 false
+      if (!Object.is(a[currentKey], b[currentKey])) return false;
+    }
+    return true;
+  }
+
+  // 그외 모두 false
+  return false;
 };
diff --git a/packages/lib/src/hocs/deepMemo.ts b/packages/lib/src/hocs/deepMemo.ts
index 13f7f18e..5f6df643 100644
--- a/packages/lib/src/hocs/deepMemo.ts
+++ b/packages/lib/src/hocs/deepMemo.ts
@@ -1,5 +1,20 @@
 import type { FunctionComponent } from "react";
+import { deepEquals } from "../equals";
+import { useRef } from "../hooks";
 
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  // 훅 사용을 위해 컴포넌트 생성
+  const MemoizedComponent = (props: P) => {
+    // 이전 프롭스와 리턴할 결과를 ref로 관리
+    const prevRef = useRef<{ props: P; result: React.ReactNode | null } | null>(null);
+
+    // 이전 프롭스와 현재 프롭스 비교
+    if (!prevRef.current || !deepEquals(prevRef.current.props, props)) {
+      // 프롭스가 다르면 새로 렌더링
+      prevRef.current = { props, result: Component(props) as React.ReactNode };
+    }
+    // 프롭스가 같으면 이전 결과 재사용
+    return prevRef.current.result;
+  };
+  return MemoizedComponent;
 }
diff --git a/packages/lib/src/hocs/memo.ts b/packages/lib/src/hocs/memo.ts
index 532c3a5c..3ad405af 100644
--- a/packages/lib/src/hocs/memo.ts
+++ b/packages/lib/src/hocs/memo.ts
@@ -1,6 +1,20 @@
 import { type FunctionComponent } from "react";
 import { shallowEquals } from "../equals";
+import { useRef } from "../hooks";
 
 export function memo<P extends object>(Component: FunctionComponent<P>, equals = shallowEquals) {
-  return Component;
+  // 훅 사용을 위해 컴포넌트 생성
+  const MemoizedComponent = (props: P) => {
+    // 이전 프롭스와 리턴할 결과를 ref로 관리
+    const prevRef = useRef<{ props: P; result: React.ReactNode | null } | null>(null);
+
+    // 이전 프롭스와 현재 프롭스 비교
+    if (!prevRef.current || !equals(prevRef.current.props, props)) {
+      // 프롭스가 다르면 새로 렌더링
+      prevRef.current = { props, result: Component(props) as React.ReactNode };
+    }
+    // 프롭스가 같으면 이전 결과 재사용
+    return prevRef.current.result;
+  };
+  return MemoizedComponent;
 }
diff --git a/packages/lib/src/hooks/useAutoCallback.ts b/packages/lib/src/hooks/useAutoCallback.ts
index 23100162..d226b211 100644
--- a/packages/lib/src/hooks/useAutoCallback.ts
+++ b/packages/lib/src/hooks/useAutoCallback.ts
@@ -3,5 +3,18 @@ import { useCallback } from "./useCallback";
 import { useRef } from "./useRef";
 
 export const useAutoCallback = <T extends AnyFunction>(fn: T): T => {
-  return fn;
+  // 함수 자체를 값으로 관리
+  const ref = useRef<T>(fn);
+
+  // 함수가 바뀌었으면 최신화
+  if (ref.current !== fn) {
+    ref.current = fn;
+  }
+
+  // 항상 동일한 참조를 반환하면서 내부 로직만 최신화된 ref를 호출
+  const stableCallback = useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return ref.current(...args);
+  }, []);
+
+  return stableCallback as T;
 };
diff --git a/packages/lib/src/hooks/useCallback.ts b/packages/lib/src/hooks/useCallback.ts
index 712bc898..c3f63c1c 100644
--- a/packages/lib/src/hooks/useCallback.ts
+++ b/packages/lib/src/hooks/useCallback.ts
@@ -1,7 +1,13 @@
-/* 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;
+
+  // 함수 자체를 값이라고 생각하고 useMemo를 사용해서 구현
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedCallback = useMemo(() => factory, _deps);
+
+  return memoizedCallback as T;
 }
diff --git a/packages/lib/src/hooks/useMemo.ts b/packages/lib/src/hooks/useMemo.ts
index e80692e2..3ee32c2a 100644
--- a/packages/lib/src/hooks/useMemo.ts
+++ b/packages/lib/src/hooks/useMemo.ts
@@ -1,8 +1,18 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { DependencyList } from "react";
 import { shallowEquals } from "../equals";
+import { useRef } from "./useRef";
 
 export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T {
   // 직접 작성한 useRef를 통해서 만들어보세요.
-  return factory();
+
+  // 의존성 배열과 값을 저장하는 객체를 useRef로 관리
+  const ref = useRef<{ deps: DependencyList; value: T } | null>(null);
+
+  // 의존성 배열이 바뀌었거나, 값이 바뀌었으면 factory 실행해서 값 저장
+  if (ref.current === null || !_equals(ref.current.deps, _deps)) {
+    const value = factory();
+    ref.current = { deps: _deps, value };
+  }
+
+  return ref.current.value;
 }
diff --git a/packages/lib/src/hooks/useRef.ts b/packages/lib/src/hooks/useRef.ts
index 285d4ae7..3cc0f122 100644
--- a/packages/lib/src/hooks/useRef.ts
+++ b/packages/lib/src/hooks/useRef.ts
@@ -1,4 +1,12 @@
+import { useState } from "react";
+
 export function useRef<T>(initialValue: T): { current: T } {
   // useState를 이용해서 만들어보세요.
-  return { current: initialValue };
+  const [ref] = useState({ current: initialValue });
+  return ref;
 }
+
+// export function useRef<T>(initialValue: T): { current: T } {
+//   let ref = { current: initialValue };
+//   return ref;
+// }
diff --git a/packages/lib/src/hooks/useRouter.ts b/packages/lib/src/hooks/useRouter.ts
index a18ae01f..f3a1c862 100644
--- a/packages/lib/src/hooks/useRouter.ts
+++ b/packages/lib/src/hooks/useRouter.ts
@@ -7,6 +7,18 @@ 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);
+
+  // 최적화 된 getSnapshot 함수
+  const getSnapshot = () => shallowSelector(router);
+
+  // getSnapshot에 최적화된 selector 함수를 전달하여 불필요한 리렌더링 방지
+  const state = useSyncExternalStore((onStoreChange) => {
+    router.subscribe(onStoreChange);
+    return () => router.unsubscribe(onStoreChange);
+  }, getSnapshot);
+
+  return state;
 };
diff --git a/packages/lib/src/hooks/useShallowSelector.ts b/packages/lib/src/hooks/useShallowSelector.ts
index b75ed791..8ba2f4d8 100644
--- a/packages/lib/src/hooks/useShallowSelector.ts
+++ b/packages/lib/src/hooks/useShallowSelector.ts
@@ -5,5 +5,23 @@ 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);
+
+  // 이전 상태를 저장하는 ref
+  const prev = useRef<{ state: T; selected: S }>(null);
+
+  // 선택된 상태를 반환하는 함수
+  const selected = (state: T): S => {
+    // 선택된 상태를 반환
+    const selected = selector(state);
+    // 이전 상태와 현재 상태가 같은지 확인
+    if (prev.current && shallowEquals(prev.current.selected, selected)) {
+      // 이전 상태를 반환
+      return prev.current.selected;
+    }
+    // 이전 상태를 업데이트 후 선택된 상태를 반환
+    prev.current = { state, selected };
+    return selected;
+  };
+
+  return selected;
 };
diff --git a/packages/lib/src/hooks/useShallowState.ts b/packages/lib/src/hooks/useShallowState.ts
index 7b589748..53e2e34f 100644
--- a/packages/lib/src/hooks/useShallowState.ts
+++ b/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]) => {
+export const useShallowState = <T>(initialValue: T | (() => T)) => {
   // useState를 사용하여 상태를 관리하고, shallowEquals를 사용하여 상태 변경을 감지하는 훅을 구현합니다.
-  return useState(initialValue);
+
+  // useState를 사용하여 상태를 관리
+  const [state, setState] = useState<T>(initialValue);
+
+  // setState의 참조를 고정하기 위해 useCallback 사용
+  const setShallowState = useCallback((next: T) => {
+    // 이전 상태와 새로운 상태를 비교하여 변경이 필요한 경우에만 상태 업데이트
+    setState((prev) => (shallowEquals(prev, next) ? prev : next));
+  }, []);
+
+  // 상태와 상태 업데이트 함수를 반환
+  return [state, setShallowState] as const;
 };
diff --git a/packages/lib/src/hooks/useStorage.ts b/packages/lib/src/hooks/useStorage.ts
index fdc97a6f..d51f5bf0 100644
--- a/packages/lib/src/hooks/useStorage.ts
+++ b/packages/lib/src/hooks/useStorage.ts
@@ -5,5 +5,12 @@ type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
   // useSyncExternalStore를 사용해서 storage의 상태를 구독하고 가져오는 훅을 구현해보세요.
-  return storage.get();
+
+  // useSyncExternalStore로 외부 상태를 구독
+  const value = useSyncExternalStore((onStoreChange) => {
+    storage.subscribe(onStoreChange);
+    return () => storage.unsubscribe(onStoreChange);
+  }, storage.get);
+
+  return value;
 };
diff --git a/packages/lib/src/hooks/useStore.ts b/packages/lib/src/hooks/useStore.ts
index acf3ad79..f51bd3be 100644
--- a/packages/lib/src/hooks/useStore.ts
+++ b/packages/lib/src/hooks/useStore.ts
@@ -8,6 +8,18 @@ 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());
+
+  // 최적화 된 getSnapshot 함수
+  const getSnapshot = () => shallowSelector(store.getState());
+
+  // getSnapshot에 최적화된 selector 함수를 전달하여 불필요한 리렌더링 방지
+  const state = useSyncExternalStore((onStoreChange) => {
+    store.subscribe(onStoreChange);
+    return () => store.unsubscribe(onStoreChange);
+  }, getSnapshot);
+
+  return state;
 };
diff --git a/packages/lib/src/utils/typeChecker.ts b/packages/lib/src/utils/typeChecker.ts
new file mode 100644
index 00000000..78804e4c
--- /dev/null
+++ b/packages/lib/src/utils/typeChecker.ts
@@ -0,0 +1,3 @@
+export const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};