The difference between the two export ways when use observer from react-mobx?

[allSmi]

the two export ways

1. the first way, when add or delete the hooks, after save, the browser console will log error

// App.js
const App = function () {

    // toggle comments this line and save, the console will log error
    // const [test, setTest] = useState(0);

    return (
        <div>...</div>
    )
}
export default observer(App);

Warning: React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Uncaught Error: Rendered more hooks than during the previous render.

2. the second way, when add or delete the hooks, after save, is good

// App.js
const App = observer(function () {

    // toggle comments this line and save, isOk
    // const [test, setTest] = useState(0);
    
    return (
        <div>...</div>
    )
})
export default App;

How to reproduce the issue:

the demo url : https://github.com/allSmi/cra-app
and the App.js: https://github.com/allSmi/cra-app/blob/master/src/App.js

git clone https://github.com/allSmi/cra-app.git
cd cra-app
npm install
npm start

Versions

"mobx": "^6.6.1",
"mobx-react": "^7.5.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Question
What is the difference between the two ways? I think they are equivalent.

Thanks😊😊😊

[urugator]

On the first sight, probably relates to fast-refresh #2668
Can you try without fast-refresh (eg run in production mode)?

[allSmi]

npm run eject

and

// add in scripts/start.js
process.env.FAST_REFRESH = false

Disabled the fast-refresh, the first type is also good. But after modify and save, the brower will reload.
Looks like a fast-refresh problem, thanks😊😊😊