CODEWITHSUNDEEP
reactjsnext.jskeyreconciliation
을왕라
을왕라

Reputation: 1

React key value is overwritten in NextJS (page router)

I am using NextJS (page router), React 17, and react-device-detect.

import { isDesktop } from 'react-device-detect';

export default function Page() {
  return (
    <div>
      {!isDesktop && <button key='first' data-key='first'>1</button>}
      <button key='second' data-key='second'>2</button>
    </div>
  )
}

After that, request a page from the NextJS server and check the network tab, the content of the page looks like this.

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>
      <button data-key="second">2</button>
    </div>
    ...
  </body>
</html>

When viewed from a browser to a mobile screen, all data-key attribute value appear as 'second'.

    <div>
      <button data-key="second">1</button>
      <button data-key="second">2</button>
    </div>

To solve the problem, I used useragent to check isDesktop on the server side and render it.

I'm more curious about the reason than the solution.

Is this a situation where react cannot detect and rerender because react-device-detect does not change the state?

I'd like to hear a detailed explanation!

reproduce the situation

Upvotes: 0

Views: 31

Answers (0)

Related Questions