Prop mismatch, server: "null", client: "true" for a value computed by useState(false)

[prscoelho]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT Mon, 21 Mar 2022 22:59:40 +0000
    Binaries:
      Node: 17.7.2
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.1-canary.17
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

Firefox 98.0.2; Firefox developer edition 99.0b7

How are you deploying your application? (if relevant)

next dev

Describe the Bug

A page component renders two buttons, which are disabled depending on state of useState. Changing that state, and refreshing the page results in a Warning: Prop `disabled` did not match. Server: "null" Client: "true". Neither button is disabled, but one of them should be.

If I only render one button, the error doesn't happen anymore even after changing state and refreshing.

This only seems to happen on firefox, tested in chromium and it doesn't seem to happen.

I found this discussion, but no issue. The discussion seems to tend towards this being a firefox bug, but since it no longer happens once we go from two buttons to one, I figured I should file an issue.

Expected Behavior

There should be no mismatch, there's no difference between the server and client.

To Reproduce

import type { NextPage } from 'next'
import { useState } from 'react'

const Home: NextPage = () => {
  const [isDisabled, setDisabled] = useState(false)

  return (
    <div>
      <button disabled={isDisabled} onClick={() => setDisabled(true)}>disable</button>
      <button disabled={!isDisabled} onClick={() => setDisabled(false)}>enable</button>
    </div>
  )
}
export default Home

In firefox, click the button to change default state, refresh and it should result in Warning: Prop `disabled` did not match. Server: "null" Client: "true".

Comment out the second button, refresh, change default state and refresh again and there's no mismatch anymore.

[prscoelho]

Looks like this is a firefox bug indeed. I found these:

facebook/react#21459
https://bugzilla.mozilla.org/show_bug.cgi?id=654072
whatwg/html#7292

The fix for now is to set autoComplete='off, unfortunately this is a firefox only property so it's not in button prop interface, but you can trick typescript by spreading the autoComplete like this:

const extraProps = {
  autoComplete: 'off'
}
return <button {...extraProps}></button>

[github-actions]

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