diff --git a/README.md b/README.md
index 4ec9275c4..2ec9ee322 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ const { Stack, useFlow } = stackflow({
   // ...
 });
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <Stack />
   );
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 9333a1bf0..8832be299 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -2,7 +2,7 @@ import { StrictMode, Suspense } from "react";
 
 import { Stack } from "./stackflow";
 
-const App: React.FC = () => (
+const App = () => (
   <StrictMode>
     <Suspense>
       <Stack />
diff --git a/demo/src/assets/IconBell.tsx b/demo/src/assets/IconBell.tsx
index dd7c77864..97e9f6cb8 100644
--- a/demo/src/assets/IconBell.tsx
+++ b/demo/src/assets/IconBell.tsx
@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconBell: React.FC = () => (
+const IconBell = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconChatting.tsx b/demo/src/assets/IconChatting.tsx
index efd7d3a87..6a9c46116 100644
--- a/demo/src/assets/IconChatting.tsx
+++ b/demo/src/assets/IconChatting.tsx
@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconChatting: React.FC = () => (
+const IconChatting = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconExpandMore.tsx b/demo/src/assets/IconExpandMore.tsx
index 4d43cdecc..5645618d2 100644
--- a/demo/src/assets/IconExpandMore.tsx
+++ b/demo/src/assets/IconExpandMore.tsx
@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconExpandMore: React.FC = () => (
+const IconExpandMore = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconHome.tsx b/demo/src/assets/IconHome.tsx
index 059067e4f..2eb22a97f 100644
--- a/demo/src/assets/IconHome.tsx
+++ b/demo/src/assets/IconHome.tsx
@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconHome: React.FC = () => (
+const IconHome = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconMenu.tsx b/demo/src/assets/IconMenu.tsx
index 07bf76616..5edc1f2a7 100644
--- a/demo/src/assets/IconMenu.tsx
+++ b/demo/src/assets/IconMenu.tsx
@@ -8,7 +8,7 @@ const SVG = `
 </svg>
 `;
 
-const IconMenu: React.FC = () => (
+const IconMenu = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconProfile.tsx b/demo/src/assets/IconProfile.tsx
index e72559daf..ccb326ec8 100644
--- a/demo/src/assets/IconProfile.tsx
+++ b/demo/src/assets/IconProfile.tsx
@@ -7,7 +7,7 @@ const SVG = `
 </svg>
 `;
 
-const IconProfile: React.FC = () => (
+const IconProfile = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconSearch.tsx b/demo/src/assets/IconSearch.tsx
index 9cf80da5c..3846e3991 100644
--- a/demo/src/assets/IconSearch.tsx
+++ b/demo/src/assets/IconSearch.tsx
@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSearch: React.FC = () => (
+const IconSearch = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconSell.tsx b/demo/src/assets/IconSell.tsx
index 34064c6d9..54d4df8df 100644
--- a/demo/src/assets/IconSell.tsx
+++ b/demo/src/assets/IconSell.tsx
@@ -8,7 +8,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSell: React.FC = () => (
+const IconSell = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/IconSettings.tsx b/demo/src/assets/IconSettings.tsx
index 3d49f8d88..16973127e 100644
--- a/demo/src/assets/IconSettings.tsx
+++ b/demo/src/assets/IconSettings.tsx
@@ -7,7 +7,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSettings: React.FC = () => (
+const IconSettings = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/assets/ImageProfileRating.tsx b/demo/src/assets/ImageProfileRating.tsx
index 5b98d9b25..d8619b0f8 100644
--- a/demo/src/assets/ImageProfileRating.tsx
+++ b/demo/src/assets/ImageProfileRating.tsx
@@ -42,7 +42,7 @@ const SVG = `
 </svg>
 `;
 
-const ImageProfileRating: React.FC = () => (
+const ImageProfileRating = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 
diff --git a/demo/src/components/ArticleCard.tsx b/demo/src/components/ArticleCard.tsx
index 1bd4e57e7..85f19d195 100644
--- a/demo/src/components/ArticleCard.tsx
+++ b/demo/src/components/ArticleCard.tsx
@@ -8,11 +8,7 @@ interface ArticleCardProps {
   title: string;
   price: number;
 }
-const ArticleCard: React.FC<ArticleCardProps> = ({
-  articleId,
-  title,
-  price,
-}) => {
+const ArticleCard = ({ articleId, title, price }: ArticleCardProps) => {
   const { push } = useFlow();
 
   const imageUrl = `https://picsum.photos/800/800/?id=${articleId}`;
diff --git a/demo/src/components/ArticleProfile.tsx b/demo/src/components/ArticleProfile.tsx
index 4d6755d48..d9c373400 100644
--- a/demo/src/components/ArticleProfile.tsx
+++ b/demo/src/components/ArticleProfile.tsx
@@ -3,7 +3,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import ImageProfileRating from "../assets/ImageProfileRating";
 import * as css from "./ArticleProfile.css";
 
-const ArticleProfile: React.FC = () => {
+const ArticleProfile = () => {
   const imageUrl = `https://picsum.photos/120/120/`;
 
   return (
diff --git a/demo/src/components/BottomTab.tsx b/demo/src/components/BottomTab.tsx
index 5dafeef14..299055e25 100644
--- a/demo/src/components/BottomTab.tsx
+++ b/demo/src/components/BottomTab.tsx
@@ -5,7 +5,7 @@ import IconProfile from "../assets/IconProfile";
 import IconSell from "../assets/IconSell";
 import * as css from "./BottomTab.css";
 
-const BottomTab: React.FC = () => (
+const BottomTab = () => (
   <div className={css.container}>
     <button type="button" className={css.button}>
       <div className={css.buttonIcon}>
diff --git a/demo/src/components/FeedCard.tsx b/demo/src/components/FeedCard.tsx
index d87acc5d8..fe2a4bfa8 100644
--- a/demo/src/components/FeedCard.tsx
+++ b/demo/src/components/FeedCard.tsx
@@ -10,13 +10,13 @@ interface FeedCardProps {
   price: number;
   daysAgo: number;
 }
-const FeedCard: React.FC<FeedCardProps> = ({
+const FeedCard = ({
   articleId,
   title,
   price,
   region,
   daysAgo,
-}) => {
+}: FeedCardProps) => {
   const { push } = useFlow();
 
   const imageUrl = `https://picsum.photos/800/800/?id=${articleId}`;
diff --git a/demo/src/components/Layout.tsx b/demo/src/components/Layout.tsx
index 888add57e..0f8924e58 100644
--- a/demo/src/components/Layout.tsx
+++ b/demo/src/components/Layout.tsx
@@ -6,7 +6,7 @@ interface LayoutProps {
   appBar?: PropOf<typeof AppScreen>["appBar"];
   children: React.ReactNode;
 }
-const Layout: React.FC<LayoutProps> = ({ appBar, children }) => (
+const Layout = ({ appBar, children }: LayoutProps) => (
   <AppScreen appBar={appBar}>{children}</AppScreen>
 );
 
diff --git a/docs/components/Demo.tsx b/docs/components/Demo.tsx
index dafc1b625..a5405aedf 100644
--- a/docs/components/Demo.tsx
+++ b/docs/components/Demo.tsx
@@ -1,7 +1,7 @@
 import { Stack } from "@stackflow/demo";
 import { useSimpleReveal } from "simple-reveal";
 
-const Demo: React.FC = () => {
+const Demo = () => {
   const { cn, ref, style } = useSimpleReveal({
     delay: 200,
     initialTransform: "scale(0.95)",
diff --git a/docs/components/DiagramActivity.tsx b/docs/components/DiagramActivity.tsx
index 81306d5e5..78593a7bb 100644
--- a/docs/components/DiagramActivity.tsx
+++ b/docs/components/DiagramActivity.tsx
@@ -13,7 +13,7 @@ const svg = `
 
 `;
 
-const DiagramActivity: React.FC = () => (
+const DiagramActivity = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2rem 0 1rem", maxWidth: "20rem" }}
diff --git a/docs/components/DiagramEffectHook.tsx b/docs/components/DiagramEffectHook.tsx
index b5c4a5277..17e239088 100644
--- a/docs/components/DiagramEffectHook.tsx
+++ b/docs/components/DiagramEffectHook.tsx
@@ -26,7 +26,7 @@ const svg = `
 </svg>
 `;
 
-const DiagramEffectHook: React.FC = () => (
+const DiagramEffectHook = () => (
   // eslint-disable-next-line react/no-danger
   <div style={{ width: "100%" }} dangerouslySetInnerHTML={{ __html: svg }} />
 );
diff --git a/docs/components/DiagramStep.tsx b/docs/components/DiagramStep.tsx
index 1130b3cd5..bb0baf51f 100644
--- a/docs/components/DiagramStep.tsx
+++ b/docs/components/DiagramStep.tsx
@@ -18,7 +18,7 @@ const svg = `
 </svg>
 `;
 
-const DiagramStep: React.FC = () => (
+const DiagramStep = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2rem 0 1rem", maxWidth: "20rem" }}
diff --git a/docs/components/DiagramTransitioningStack.tsx b/docs/components/DiagramTransitioningStack.tsx
index cd138b340..6e804d4bd 100644
--- a/docs/components/DiagramTransitioningStack.tsx
+++ b/docs/components/DiagramTransitioningStack.tsx
@@ -24,7 +24,7 @@ const svg = `
 
 `;
 
-const DiagramTransitioningStack: React.FC = () => (
+const DiagramTransitioningStack = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2.5rem 0 1rem", maxWidth: "45rem" }}
diff --git a/docs/pages/advanced/migrate-from-karrotframe.ko.mdx b/docs/pages/advanced/migrate-from-karrotframe.ko.mdx
index 703759c31..a87e04a95 100644
--- a/docs/pages/advanced/migrate-from-karrotframe.ko.mdx
+++ b/docs/pages/advanced/migrate-from-karrotframe.ko.mdx
@@ -39,7 +39,7 @@ Karrotframe의 경우,
 /**
  * as-is:
  */
-const App: React.FC = () => {
+const App = () => {
   return (
     <Navigator>
       <Screen path="/my-page/:someid" component={MyPage} />
@@ -68,7 +68,7 @@ const { Stack } = stackflow({
   ],
 });
 
-const App: React.FC = () => {
+const App = () => {
   return <Stack />;
 };
 ```
diff --git a/docs/pages/guided-tour/activity.ko.mdx b/docs/pages/guided-tour/activity.ko.mdx
index aeef19c13..0430f3f63 100644
--- a/docs/pages/guided-tour/activity.ko.mdx
+++ b/docs/pages/guided-tour/activity.ko.mdx
@@ -141,7 +141,7 @@ type ArticleParams = {
     title: string;
   };
 };
-const Article: React.FC<ArticleParams> = ({ params: { title } }) => {
+const Article = ({ params: { title } }: ArticleParams) => {
   return (
     <AppScreen appBar={{ title: "Article" }}>
       <div>
diff --git a/docs/pages/index.ko.mdx b/docs/pages/index.ko.mdx
index 760b39820..0f61e0a4e 100644
--- a/docs/pages/index.ko.mdx
+++ b/docs/pages/index.ko.mdx
@@ -94,7 +94,7 @@ import "@stackflow/plugin-basic-ui/index.css";
  */
 import { Stack } from "./stackflow";
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <div>
       <Stack />
diff --git a/extensions/plugin-basic-ui/README.md b/extensions/plugin-basic-ui/README.md
index 46a873395..da7e8d69b 100644
--- a/extensions/plugin-basic-ui/README.md
+++ b/extensions/plugin-basic-ui/README.md
@@ -27,7 +27,7 @@ const { Stack, useFlow } = stackflow({
 ```tsx
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
-const Something: React.FC = () => {
+const Something = () => {
   return (
     <AppScreen appBar={{ title: "Home" }}>
       <div>Hello, World</div>
@@ -39,7 +39,7 @@ const Something: React.FC = () => {
 ```tsx
 import { Modal } from "@stackflow/plugin-basic-ui";
 
-const Something: React.FC = () => {
+const Something = () => {
   return (
     <Modal>
       <div>Hello, World</div>
diff --git a/extensions/plugin-basic-ui/src/assets/IconBack.tsx b/extensions/plugin-basic-ui/src/assets/IconBack.tsx
index 683a1e2ad..5f6e7b9de 100644
--- a/extensions/plugin-basic-ui/src/assets/IconBack.tsx
+++ b/extensions/plugin-basic-ui/src/assets/IconBack.tsx
@@ -1,6 +1,4 @@
-const IconBack: React.FC<{
-  className?: string;
-}> = (props) => (
+const IconBack = (props: { className?: string }) => (
   <svg
     className={props.className}
     width="24"
diff --git a/extensions/plugin-basic-ui/src/assets/IconClose.tsx b/extensions/plugin-basic-ui/src/assets/IconClose.tsx
index e0e5edb77..614aa9a47 100644
--- a/extensions/plugin-basic-ui/src/assets/IconClose.tsx
+++ b/extensions/plugin-basic-ui/src/assets/IconClose.tsx
@@ -1,6 +1,4 @@
-const IconClose: React.FC<{
-  className?: string;
-}> = (props) => (
+const IconClose = (props: { className?: string }) => (
   <svg
     className={props.className}
     width="24"
diff --git a/extensions/plugin-basic-ui/src/components/AppScreen.tsx b/extensions/plugin-basic-ui/src/components/AppScreen.tsx
index 7f27eafa1..90b74a473 100644
--- a/extensions/plugin-basic-ui/src/components/AppScreen.tsx
+++ b/extensions/plugin-basic-ui/src/components/AppScreen.tsx
@@ -36,14 +36,14 @@ export type AppScreenProps = Partial<
   modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
 };
-const AppScreen: React.FC<AppScreenProps> = ({
+const AppScreen = ({
   backgroundColor,
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
   modalPresentationStyle,
   children,
-}) => {
+}: AppScreenProps) => {
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
 
diff --git a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx
index e51f5b6bd..4d3fe361e 100644
--- a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx
+++ b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx
@@ -17,13 +17,13 @@ export type BottomSheetProps = Partial<
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
-const BottomSheet: React.FC<BottomSheetProps> = ({
+const BottomSheet = ({
   borderRadius = "1rem",
   backgroundColor,
   dimBackgroundColor,
   onOutsideClick,
   children,
-}) => {
+}: BottomSheetProps) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
 
diff --git a/extensions/plugin-basic-ui/src/components/Modal.tsx b/extensions/plugin-basic-ui/src/components/Modal.tsx
index 3a9a1a9b4..c85ad0925 100644
--- a/extensions/plugin-basic-ui/src/components/Modal.tsx
+++ b/extensions/plugin-basic-ui/src/components/Modal.tsx
@@ -17,13 +17,13 @@ export type ModalProps = Partial<
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
-const Modal: React.FC<ModalProps> = ({
+const Modal = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
   onOutsideClick,
   children,
-}) => {
+}: ModalProps) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
 
diff --git a/extensions/plugin-history-sync/src/RoutesContext.tsx b/extensions/plugin-history-sync/src/RoutesContext.tsx
index ff9fc1764..d373130b2 100644
--- a/extensions/plugin-history-sync/src/RoutesContext.tsx
+++ b/extensions/plugin-history-sync/src/RoutesContext.tsx
@@ -10,7 +10,7 @@ interface RoutesProviderProps {
   routes: RoutesMap;
   children: React.ReactNode;
 }
-export const RoutesProvider: React.FC<RoutesProviderProps> = (props) => (
+export const RoutesProvider = (props: RoutesProviderProps) => (
   <RoutesContext.Provider value={props.routes}>
     {props.children}
   </RoutesContext.Provider>
diff --git a/extensions/plugin-preload/src/LoadersContext.tsx b/extensions/plugin-preload/src/LoadersContext.tsx
index f51eb9c0a..4b4392028 100644
--- a/extensions/plugin-preload/src/LoadersContext.tsx
+++ b/extensions/plugin-preload/src/LoadersContext.tsx
@@ -12,7 +12,7 @@ interface LoadersProviderProps {
   loaders: LoadersMap;
   children: React.ReactNode;
 }
-export const LoadersProvider: React.FC<LoadersProviderProps> = (props) => (
+export const LoadersProvider = (props: LoadersProviderProps) => (
   <LoadersContext.Provider value={props.loaders}>
     {props.children}
   </LoadersContext.Provider>
diff --git a/integrations/react/src/MainRenderer.tsx b/integrations/react/src/MainRenderer.tsx
index 1e216deb1..6d4144d22 100644
--- a/integrations/react/src/MainRenderer.tsx
+++ b/integrations/react/src/MainRenderer.tsx
@@ -11,9 +11,7 @@ interface MainRendererProps {
     [key: string]: ActivityComponentType;
   };
 }
-const MainRenderer: React.FC<MainRendererProps> = ({
-  activityComponentMap,
-}) => {
+const MainRenderer = ({ activityComponentMap }: MainRendererProps) => {
   const coreState = useCoreState();
   const plugins = usePlugins();
 
diff --git a/integrations/react/src/PluginRenderer.tsx b/integrations/react/src/PluginRenderer.tsx
index 92da0e264..bf2c7a965 100644
--- a/integrations/react/src/PluginRenderer.tsx
+++ b/integrations/react/src/PluginRenderer.tsx
@@ -12,10 +12,10 @@ interface PluginRendererProps {
   };
   plugin: WithRequired<ReturnType<StackflowReactPlugin>, "render">;
 }
-const PluginRenderer: React.FC<PluginRendererProps> = ({
+const PluginRenderer = ({
   activityComponentMap,
   plugin,
-}) => {
+}: PluginRendererProps) => {
   const coreState = useCoreState();
   const plugins = usePlugins();
 
diff --git a/integrations/react/src/activity/ActivityProvider.tsx b/integrations/react/src/activity/ActivityProvider.tsx
index 88d110158..6383b7d9f 100644
--- a/integrations/react/src/activity/ActivityProvider.tsx
+++ b/integrations/react/src/activity/ActivityProvider.tsx
@@ -9,10 +9,10 @@ interface ActivityProviderProps {
   children: React.ReactNode;
   value: Activity;
 }
-export const ActivityProvider: React.FC<ActivityProviderProps> = ({
+export const ActivityProvider = ({
   children,
   value,
-}) => (
+}: ActivityProviderProps) => (
   <ActivityContext.Provider value={useMemoDeep(value)}>
     {children}
   </ActivityContext.Provider>
diff --git a/integrations/react/src/core/CoreProvider.tsx b/integrations/react/src/core/CoreProvider.tsx
index 565e5b59a..056491369 100644
--- a/integrations/react/src/core/CoreProvider.tsx
+++ b/integrations/react/src/core/CoreProvider.tsx
@@ -12,10 +12,7 @@ export interface CoreProviderProps {
   coreStore: CoreStore;
   children: React.ReactNode;
 }
-export const CoreProvider: React.FC<CoreProviderProps> = ({
-  coreStore,
-  children,
-}) => {
+export const CoreProvider = ({ coreStore, children }: CoreProviderProps) => {
   const stack = useSyncExternalStore(
     coreStore.subscribe,
     coreStore.actions.getStack,
diff --git a/integrations/react/src/plugins/PluginsProvider.tsx b/integrations/react/src/plugins/PluginsProvider.tsx
index 8f3179535..4e2d2120d 100644
--- a/integrations/react/src/plugins/PluginsProvider.tsx
+++ b/integrations/react/src/plugins/PluginsProvider.tsx
@@ -9,10 +9,7 @@ interface PluginsProviderProps {
   children: React.ReactNode;
   value: PluginsContextValue;
 }
-export const PluginsProvider: React.FC<PluginsProviderProps> = ({
-  children,
-  value,
-}) => (
+export const PluginsProvider = ({ children, value }: PluginsProviderProps) => (
   <PluginsContext.Provider value={value}>{children}</PluginsContext.Provider>
 );
 
diff --git a/integrations/react/src/stack/StackProvider.tsx b/integrations/react/src/stack/StackProvider.tsx
index 32d75d710..d0011d355 100644
--- a/integrations/react/src/stack/StackProvider.tsx
+++ b/integrations/react/src/stack/StackProvider.tsx
@@ -9,10 +9,7 @@ interface StackProviderProps {
   children: React.ReactNode;
   value: Stack;
 }
-export const StackProvider: React.FC<StackProviderProps> = ({
-  children,
-  value,
-}) => (
+export const StackProvider = ({ children, value }: StackProviderProps) => (
   <StackContext.Provider value={useMemoDeep(value)}>
     {children}
   </StackContext.Provider>