Question 301645 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why can't I use useState in Next JS 14?

I have been facing issues using useState inside a useEffect for a while, so I decided to create a new project to test some things.

I’ve just created a new project, and the only thing I’ve done was change the main page.tsx file for this:

"use client"

import { useEffect, useState } from "react";

export default async function Home() {
  const [a, b] = useState(10)

  useEffect(() => {
    b(20)
  }, [])
  
  return (
    <div>
      <p>
        test: {a}
      </p>
    </div>
  )
}

Even with this simple code, I can already reproduce the error I was getting, which is:

"Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server."

But I’m not using async/await. Only useEffect and useState. Why is this?

I tried using Next 13 and it did work, but it won’t work with the 14th version. The specific version I’m using is the latest: 14.0.4.

Tags:

2

Answers


  1. 0

    Remove "async" on line 5

    So your code may be like that

    'use client'

import { useEffect, useState } from 'react'

export default function Home() {
  const [a, b] = useState(10)

  useEffect(() => {
    b(20)
  }, [])

  return (
    <div>
      <p>test: {a}</p>
    </div>
  )
}
    Login or Signup to reply.
  2. 0

    The error you’re encountering that, 'async/ await is not yet supported in client components' it is due to the "use client" you’ve added at the begining of code.

    • This indicates that the file is intended for server-side logic.
    • In you’re code the function Home is declared as async which is note supported in client component.
    • so, remove use client and declare Home as regular function

    code
    (removed use client and async ) 

    import { useEffect, useState } from "react";

export default function Home() {
  const [a, b] = useState(10)

  useEffect(() => {
    b(20)
  }, [])
  
  return (
    <div>
      <p>
        test: {a}
      </p>
    </div>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search