Next.js: Fast refresh not working as expected

[Rawnly]

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.

[StarpTech]

Arrow functions aren't supported. Name your functional component.

export default function MyPage () {...

[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!

[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.

[kevinswarner]

I know this issue is closed, but could I get some clarification on exporting components for fast refresh to work correctly? I am getting full reloads at seemingly random times. I come to a page, start to interact with it, and then boom, it does a full reload. I have gone through all my pages and components to make sure I am only exporting a single default value. But, maybe something else is going on...

I am exporting my pages and components like this...

const FooBar = () => {
...
};

export default FooBar;

Is this OK, or do I need to export all my pages and components like this...

export default function FooBar() {
...
}

I have always preferred the first approach, so if both are fine for fast refresh, I don't want to go and refactor all my components and pages.

Thanks,

Kevin

[Timer]

Both of those will work with Fast Refresh.

[kevinswarner]

@Timer Thanks. I thought so. I just cannot figure out what is causing the full reloads at what seems like random times.

What about hooks? Do they need to be the only thing exported from a module, as the default? For example, I have some hooks I use in my pages, and those hooks are exported as named exports from modules that also export other functions that are not React components.

[Timer]

That'd be fine as long as the components themselves are the only export in their file. Did you read through the fast refresh docs?

[kevinswarner]

Yes. It is not a huge problem right now. I am sure there is some issue in my code. Thanks for replying!