From 71844ebe5c96cc609cb423424fe18b98741cfc79 Mon Sep 17 00:00:00 2001
From: woogie0303 <86232911+woogie0303@users.noreply.github.com>
Date: Wed, 28 Aug 2024 02:08:26 +0900
Subject: [PATCH] refactor: refactored using the useUpdatableRef hook (#46)

---
 packages/core/src/FunnelRender.tsx | 7 ++++---
 packages/core/src/utils.ts         | 3 +--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/FunnelRender.tsx b/packages/core/src/FunnelRender.tsx
index cf75592..dd6e9cc 100644
--- a/packages/core/src/FunnelRender.tsx
+++ b/packages/core/src/FunnelRender.tsx
@@ -1,6 +1,7 @@
-import { Fragment, useMemo, useRef } from 'react';
+import { Fragment, useMemo } from 'react';
 import { AnyStepContextMap, FunnelHistory, FunnelStep, RouteOption } from './core.js';
 import { FunnelRouterTransitionOption } from './router.js';
+import { useUpdatableRef } from './utils.js';
 
 export type FunnelStepByContextMap<TStepContextMap extends AnyStepContextMap, TRouteOption extends RouteOption> = {
   [TStepKey in keyof TStepContextMap & string]: FunnelStep<TStepContextMap, TStepKey, TRouteOption>;
@@ -145,8 +146,8 @@ function useOverwriteFunnelHistoryTransitionArgument<
     option?: FunnelRouterTransitionOption,
   ) => FunnelRouterTransitionOption,
 ): FunnelHistory<TStepContextMap, TStepKey, TRouteOption> {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const callbackRef = useUpdatableRef(callback);
+
   return useMemo(() => {
     return {
       ...history,
diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
index 12006d7..d793b6f 100644
--- a/packages/core/src/utils.ts
+++ b/packages/core/src/utils.ts
@@ -10,8 +10,7 @@ interface Store<T> {
  * A hook used to pass the state of the hook to a component when creating the component inside the hook.
  */
 export function useStateSubscriberStore<T>(state: T) {
-  const stateRef = useRef(state);
-  stateRef.current = state;
+  const stateRef = useUpdatableRef(state);
 
   const stateStoreRef = useRef<Store<T>>({
     listeners: [],