chore: minor cleanup code

apps/playground/src/hooks/react-signal.ts

@@ -13,7 +13,6 @@ import {useCallback, useEffect, useReducer, useRef, useSyncExternalStore} from '
  * Use `Signal` inside React component.
  * ___
  * ⚠️ [Experimental] Lack of testing. **DO NOT** use in production.
- * - `useSignal`'s setter causes component to re-render twice on strict mode.
  */
 export function useSignal<T>(): SignalFactoryReturnType<T | undefined>;
 export function useSignal<T>(value: T, options?: SignalOptions<T>): SignalFactoryReturnType<T>;
@@ -26,17 +25,17 @@ export function useSignal<T>(
     signalRef.current = createSignal<T | undefined>(value, {equals, onChange});
   }
 
-  useSyncExternalStore(
-    useCallback((onStoreChange) => {
-      const cleanupEffect = createEffect(() => {
+  const externalSubscribe = useCallback<Parameters<typeof useSyncExternalStore>[0]>(
+    (onStoreChange) =>
+      createEffect(() => {
         signalRef.current?.[0]();
         onStoreChange();
-      });
-      return cleanupEffect;
-    }, []),
-    signalRef.current[0],
+      }),
+    [],
   );
 
+  useSyncExternalStore(externalSubscribe, signalRef.current[0]);
+
   return signalRef.current;
 }
 
@@ -56,7 +55,7 @@ export const useSignalEffect = (effect: SignalEffect) => {
   useEffect(() => {
     const cleanupEffect = createEffect(effect);
     // forceUpdate();
-    return () => cleanupEffect();
+    return cleanupEffect;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };

apps/playground/src/routeTree.gen.ts

@@ -16,11 +16,17 @@ import { Route as rootRoute } from './routes/__root'
 
 // Create Virtual Routes
 
+const OtherLazyImport = createFileRoute('/other')()
 const SignalRouteLazyImport = createFileRoute('/signal')()
 const IndexRouteLazyImport = createFileRoute('/')()
 
 // Create/Update Routes
 
+const OtherLazyRoute = OtherLazyImport.update({
+  path: '/other',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/other.lazy').then((d) => d.Route))
+
 const SignalRouteLazyRoute = SignalRouteLazyImport.update({
   path: '/signal',
   getParentRoute: () => rootRoute,
@@ -49,6 +55,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SignalRouteLazyImport
       parentRoute: typeof rootRoute
     }
+    '/other': {
+      id: '/other'
+      path: '/other'
+      fullPath: '/other'
+      preLoaderRoute: typeof OtherLazyImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -57,6 +70,7 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexRouteLazyRoute,
   SignalRouteLazyRoute,
+  OtherLazyRoute,
 })
 
 /* prettier-ignore-end */
@@ -68,14 +82,18 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/signal"
+        "/signal",
+        "/other"
       ]
     },
     "/": {
       "filePath": "index/route.lazy.tsx"
     },
     "/signal": {
       "filePath": "signal/route.lazy.tsx"
+    },
+    "/other": {
+      "filePath": "other.lazy.tsx"
     }
   }
 }

apps/playground/src/routes/other.lazy.tsx

@@ -0,0 +1,5 @@
+import {createLazyFileRoute} from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/other')({
+  component: () => <div>Hello /other!</div>,
+});

apps/playground/src/routes/signal/route.lazy.tsx

@@ -1,4 +1,4 @@
-import {createLazyFileRoute} from '@tanstack/react-router';
+import {createLazyFileRoute, Link} from '@tanstack/react-router';
 import {playgroundSignal} from './-utils/store';
 import PlaygroundChild3 from './-components/PlaygroundChild3';
 import {useState} from 'react';
@@ -111,10 +111,13 @@ function PlaygroundChild2() {
 
 function SignalPlayground() {
   return (
-    <div className="flex-center-between h-1/2 gap-4 p-4 *:flex-1">
-      <PlaygroundChild1 />
-      <PlaygroundChild2 />
-      <PlaygroundChild3 />
-    </div>
+    <>
+      <Link to="/other">Other page</Link>
+      <div className="flex-center-between h-1/2 gap-4 p-4 *:flex-1">
+        <PlaygroundChild1 />
+        <PlaygroundChild2 />
+        <PlaygroundChild3 />
+      </div>
+    </>
   );
 }