useOptimistic error

[nicitaacom]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

npx --no-install next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Debian 6.5.3-1kali2 (2023-10-03)
Binaries:
  Node: 18.13.0
  npm: 9.2.0
  Yarn: 1.22.19
  pnpm: 8.9.0
Relevant Packages:
  next: 13.5.6-canary.6
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which example does this report relate to?

https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Expected 1 arguments, but got 2.ts(2554)

in this example

"use client"

import { experimental_useOptimistic as useOptimistic } from "react"

type Message = {
  message: string
}

export function Thread({ messages }: { messages: Message[] }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic<Message[]>(
    messages,
    (state: Message[], newMessage: string) => [...state, { message: newMessage }],
  )

  return (
    <div>
      {optimisticMessages.map((m, k) => (
        <div key={k}>{m.message}</div>
      ))}
      <form
        action={async (formData: FormData) => {
          const message = formData.get("message")
          addOptimisticMessage(message)
        }}>
        <input type="text" name="message" />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

This line of code cause error - (state: Message[], newMessage: string) => [...state, { message: newMessage }],

Expected Behavior

I wait no error
I got error

To Reproduce

codesandbox - doesn't work
stackblitz - no way to open in vs code
github project - I don't want create repository only for this issue

1.pnpm create-next-app@latest
2.paste code above in page.tsx
3.got the error

[grzegorzpokorski]

If I good understand in the canary version of Next.js it uses the canary version of the React library. Recently React team removed a "experimental_" prefix from useOptimistic, useFormStatus, and useFormState. facebook/react#27459 So maybe upgrading Next.js to canary and removing 'experimental_' prefix will resolve your problem.

[grzegorzpokorski]

Related #57026

[nicitaacom]

I decided do it with react-query - TanStack/query#6179
Anyway I see in my head functionality with localstorage rather then creating 1 week live anonymous cart in DB (so zustand and reqct-query required 'use client' - so I decided do it like so to achive best performance when user interact with UI - even if it cost IPL (initial page loading))

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.