How to fix Async component function detected but component is not async in React

ReactINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 100 views

This error occurs when you try to define a Client Component as an async function in React or Next.js. Client Components do not support async functions because they run in the browser where async component rendering is not yet supported. Only Server Components can be async, allowing them to await data directly in the component body.

Quick fix

Fixes Async component function detected but component is not async

// If your component looks like this with no client features:
"use client";  // ← Remove this line

async function MyComponent() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}
  1. Identify whether your component truly needs to be a Client Component
  2. Remove the async keyword from Client Components
  3. Split into Server and Client Components
  4. Use React Server Actions for mutations from Client Components
react — error
// If your component looks like this with no client features:
"use client";  // ← Remove this line
async function MyComponent() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}
Async component function detected but component is not async

What this error means

React introduced async Server Components as part of React Server Components (RSC) architecture, allowing components to be async functions that can await promises during rendering. However, this feature is only available for Server Components that run on the server. Client Components, which run in the browser and include interactive features like event handlers and hooks, cannot be async functions. When you mark a component with "use client" directive (making it a Client Component) and also define it as an async function, React or Next.js throws this error because the two features are incompatible. The browser environment does not yet support suspending component rendering while awaiting promises in the same way the server can.

Typical symptoms

  • Build-time error in Next.js: "Async Client Component" or similar message
  • Runtime error when trying to render a Client Component defined as async
  • Error message specifically mentioning "async component function" with Client Component
  • Application fails to compile or crashes when a component with "use client" is also async
  • TypeScript or linting errors indicating async components cannot be client-side
  • Next.js dev server showing error about no async client components allowed

Common causes

  1. Defining a Client Component (with "use client" directive) as an async function
  2. Converting a Server Component to a Client Component without removing the async keyword
  3. Adding "use client" to an existing async Server Component that uses await
  4. Attempting to use async/await directly in a component function that needs client-side interactivity
  5. Misunderstanding that only Server Components can be async in React Server Components architecture
  6. Trying to fetch data using async/await in a component that also uses hooks or event handlers (which require client-side execution)

How to fix "Async component function detected but component is not async"

1Identify whether your component truly needs to be a Client Component

Check if your component uses client-side features like useState, useEffect, event handlers (onClick, onChange), or browser APIs. If it does not use any of these, remove the "use client" directive and keep it as a Server Component where async is allowed.

typescript
// If your component looks like this with no client features:
"use client";  // ← Remove this line

async function MyComponent() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}
2Remove the async keyword from Client Components

If your component must be a Client Component (because it uses hooks or event handlers), remove the async keyword from the function definition. Move any data fetching logic to useEffect or use a data fetching library.

typescript
// WRONG - Client Component cannot be async
"use client";

async function MyComponent() {
  const data = await fetchData();
  return <div onClick={handleClick}>{data.title}</div>;
}

// CORRECT - Use useEffect for data fetching
"use client";
import { useState, useEffect } from "react";

function MyComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return <div onClick={handleClick}>{data?.title}</div>;
}
3Split into Server and Client Components

If you need both async data fetching and client-side interactivity, split your component into two: a Server Component that fetches data and a Client Component that handles interactivity. Pass the fetched data as props.

typescript
// ServerComponent.tsx (async, no "use client")
async function ServerComponent() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ClientComponent.tsx (not async, has "use client")
"use client";

interface Props {
  data: DataType;
}

function ClientComponent({ data }: Props) {
  const handleClick = () => {
    // Client-side logic
  };
  
  return <div onClick={handleClick}>{data.title}</div>;
}
4Use React Server Actions for mutations from Client Components

If you need to call async functions from a Client Component (like form submissions or mutations), use Server Actions. Define the async function with "use server" and call it from your Client Component.

typescript
// actions.ts
"use server";

export async function submitForm(formData: FormData) {
  const result = await saveToDatabase(formData);
  return result;
}

// ClientComponent.tsx
"use client";
import { submitForm } from "./actions";

function ClientComponent() {
  const handleSubmit = async (formData: FormData) => {
    const result = await submitForm(formData);
    // Handle result
  };
  
  return <form action={handleSubmit}>...</form>;
}
5Use third-party data fetching libraries for Client Components

For complex data fetching in Client Components, use libraries like SWR, React Query (TanStack Query), or Apollo Client. These libraries handle caching, revalidation, and loading states automatically.

typescript
"use client";
import useSWR from "swr";

function ClientComponent() {
  const { data, error, isLoading } = useSWR("/api/data", fetcher);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;
  
  return <div onClick={handleClick}>{data.title}</div>;
}
6Verify your Next.js app directory structure

In Next.js App Router, all components are Server Components by default. Only add "use client" when absolutely necessary. Review your component tree and ensure you are not unnecessarily marking components as Client Components when they could remain Server Components.

typescript
// app/page.tsx (Server Component - can be async)
async function Page() {
  const data = await fetchData();
  return (
    <div>
      <ServerContent data={data} />
      <InteractiveButton />  {/* This can be a Client Component */}
    </div>
  );
}

Advanced notes

The async component restriction exists because React needs to synchronously render Client Components in the browser. When a component is async, React would need to suspend rendering and wait for promises to resolve, which is only supported in Server Components running in Node.js. The React team is exploring ways to support async Client Components in the future, possibly using the use() hook for promise unwrapping. For now, the recommended pattern is to keep your component tree mostly Server Components (async) and only mark the minimal interactive parts as Client Components. This pattern is called "Server Component First" and results in smaller JavaScript bundles sent to the client. In Next.js 13+ with App Router, you can fetch data in layouts and pages (Server Components) and pass it down to Client Components, creating a clean separation of concerns. If you absolutely need async behavior in something that feels like a Client Component, consider using the use() hook with Suspense boundaries, though this is an advanced pattern and may not be necessary for most use cases.

Frequently asked questions

What does "Async component function detected but component is not async" mean?
React introduced async Server Components as part of React Server Components (RSC) architecture, allowing components to be async functions that can await promises during rendering. However, this feature is only available for Server Components that run on the server. Client Components, which run in the browser and include interactive features like event handlers and hooks, cannot be async functions.
How do I fix "Async component function detected but component is not async"?
This error occurs when you try to define a Client Component as an async function in React or Next.js. Client Components do not support async functions because they run in the browser where async component rendering is not yet supported. Only Server Components can be async, allowing them to await data directly in the component body.
What causes "Async component function detected but component is not async"?
Defining a Client Component (with "use client" directive) as an async function Converting a Server Component to a Client Component without removing the async keyword Adding "use client" to an existing async Server Component that uses await
Is the "Async component function detected but component is not async" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading