Next.js Discord

Discord Forum

Page is crashing !

Answered
Ninhache posted this in #help-forum
Open in Discord
NinhacheOP
Using App Router, i were trying to do a simple page :
- displaying a random number
- have a button to get a new number..

---

I've done this so far :

export default async function Number({ }) {
  return (
    <>
      <main>
        <p>Random number : {number}</p>
      </main>
    </>
  )
}

it's working without any problem but it's misses the button.. then i've tried to implement it that way :
"use client"

import { useState } from "react"

export default async function Number({ }) {

  const [number, setNumber] = useState(Math.random())

  return (
    <>
      <main>
        <button onClick={() => setNumber(Math.random())}>new number</button>
        <p>Random number :{number}</p>
      </main>
    </>
  )
}

but now my page is currently freezing, and then crash..
any idea of why ? i've nothing more to show 🤓
Answered by andweas
Remove “async” from the function
View full answer

25 Replies

Asian black bear
The ssr initial number has to match the first number on the client. Generate it in a wrapping component and pass it in as a prop. Or start with a fixed number like zero or null, and generate the random numbers only client side in useEffect
NinhacheOP
that's means if i pass null to the useState, it will fix it ?
because it's not.. and the number should allways be the same now
Asian black bear
Right now it runs once on the server, then again on the client during hydration... so twice
NinhacheOP
but the two times should be the same now ?
Asian black bear
But yeah do a null use state, and set it from useEffect
NinhacheOP
useEffect should fix the error for the number yea
but
"use client"

import { useState } from "react"

export default async function Number({ }) {

  const [number, setNumber] = useState(0)

  return (
    <>
      <main>
        <button onClick={() => setNumber(Math.random())}>new number</button>
        <p>Random number :{number}</p>
      </main>
    </>
  )
}
This isnt working, page keeps freezing
and the render should be the same..
Asian black bear
What do you mean it freezes?
NinhacheOP
seems like i've an infinite loop or something
Asian black bear
When you click the button?
NinhacheOP
nah
when i'm trying to load the page
Asian black bear
Idk, run the profiler in the dev tools on a fresh reload and see?
It looks right to me
andweas
Remove “async” from the function
Answer
NinhacheOP
still same
andweas
i’ve had issues with async client components, that may be the reason for the infinite load
open the site in a new tab
NinhacheOP
i've tried to recompile and it seems to work
Ok it worked lmao