Fast refresh not working as expected

Bug report

Describe the bug

Fast refresh isn’t working as expected. Running the following code with next ^9.4.0 if I edit any

To Reproduce

	import { useState, useCallback } from 'react'
	
	export default () => {
	  const [counter, setCounter] = useState(0);
	  const incrementCount = useCallback(() => {
	    setCounter(x => x + 1)
	  }, [counter])
	
	  return (
	    <div className="container">
	      <h1>Hello Next!!</h1>
	      <button onClick={incrementCount}>
	        Clicked {counter} times
	      </button>
	    </div>
	  )
	}

(pages/index.tsx)

When I update any piece of code the page fully reload as usual… Am I doing something wrong?

Expected behavior

I expect the page to maintain the state.

System information

• OS: macOS,
• Browser (if applies) Firefox developer edition
• Version of Next.js: 9.4
• Version of Node.js: 13.1.0

Extra config

• No next-config.js
• Postcss and Sass are installed.

[elderapo]

It would be nice if next.js automatically generated/set names for defaultly exported arrow function pages.

For example:

// pages/home.ts

export default () => {
   return <div>Hello from the home page!</div>
}

could automatically be named: Home/HomePage.

[Rawnly]

Thank you! Resolved by adding displayName to the component.

const Page: NextPage = () => {
  ...
}

Page.displayName = 'MyPage'

export default Page;

Now it’s working as expected. Thanks!