This Shouldn't Work But It Does🤔

https://github.com/Apestein/async-client-demo/tree/main

"use client"

type Todo = {
  userId: number
  id: number
  title: string
  completed: boolean
}
async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1")
  if (!res.ok) throw new Error("failed to fetch")
  return res.json() as Promise<Todo>
}

export async function AsyncClient() {
  const todo = await getData()
  console.log(todo) //this gets logged to client
  return (
    <div className="flex flex-col gap-3 border p-3">
      Async Client Component
      <button className="border" onClick={() => console.log("clicked")}>
        Button
      </button>
      Todo: {todo.id}
    </div>
  )
}

"use client"

type Todo = {
  userId: number
  id: number
  title: string
  completed: boolean
}
async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1")
  if (!res.ok) throw new Error("failed to fetch")
  return res.json() as Promise<Todo>
}

export async function AsyncClient() {
  const todo = await getData()
  console.log(todo) //this gets logged to client
  return (
    <div className="flex flex-col gap-3 border p-3">
      Async Client Component
      <button className="border" onClick={() => console.log("clicked")}>
        Button
      </button>
      Todo: {todo.id}
    </div>
  )
}

This is an async client component, this should not work and yet it does. The console.log will show up on client. It will not let you use useState but onClick will work. If you do export default async function instead then it will give you an error as expected but export async function will work.

6 Replies

Brendonovich•2y ago

I'm pretty sure async client components are an experimental feature of React that used to throw an error when you used them, but now they just work but you reeeeealy shouldn't use them yet

Luc LedoOP•2y ago

They shouldn't work at all. Docs say it shouldn't be possible. For some reason removing "default" from function declaration makes it work...

Brendonovich•2y ago

Well they are a thing, I don't have a link on hand explaining it but they do somewhat work but shouldn't be relied on

Luc LedoOP•2y ago

I love to see a link for this if anyone got it but yeah I discovered this but accident

Brendonovich•2y ago

this might explain some things https://github.com/reactjs/rfcs/pull/229#discussion_r994853896

GitHub

RFC: First class support for promises and async/await by acdlite · ...

Adds first class support for reading the result of a JavaScript Promise using Suspense: Introduces support for async/await in Server Components. Write Server Components using standard JavaScript a...

Luc LedoOP•2y ago

Maybe they forgot to write an warning error for export async function signature

Gaming

Programming

This Shouldn't Work But It Does🤔