When using useEffect(), an error appears: Warning: React has detected a change in the order of Hooks called by wrappedComponent. This will lead to bugs and errors if not fixed.

[it-efrem]

• [x] Provide error messages including stacktrace Click: After click and "white screen":

• [x] Provide a minimal sample reproduction. **

Repository -> https://github.com/Evgeny-Bukovski/MobX-React-ToDo-Example-forms-fetch-async Commit with errors-> https://github.com/Evgeny-Bukovski/MobX-React-ToDo-Example-forms-fetch-async/commit/70260f861cdceb100e35eb3308f7f6ddb12f5e59

• [x] Did you check this issue wasn't filed before?
• [x] Elaborate on your issue. What behavior did you expect?

I expect a list item to be added without errors.

• [x] State the versions of MobX and relevant libraries.

  "dependencies": {
  "@babel/plugin-proposal-decorators": "^7.8.3",
  "@babel/preset-env": "^7.8.4",
  "@babel/preset-react": "^7.8.3",
  "babel-loader": "^8.0.6",
  "file-loader": "^5.0.2",
  "koa": "^2.11.0",
  "mobx": "^5.15.4",
  "mobx-react": "^6.1.4",
  "nodemon": "^2.0.2",
  "npm": "^6.13.7",
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "webpack": "^4.41.5"
  },
  "devDependencies": {
  "@babel/plugin-transform-react-jsx": "^7.8.3",
  "@babel/plugin-transform-strict-mode": "^7.8.3",
  "babel-preset-minify": "^0.5.1",
  "source-map-loader": "^0.2.4"
  }

[mweststrate]

You are calling a component as a function. Instead of store.map(Item) do store.map(item => <Item .... />) (note that this is further unrelated to MobX)

[it-efrem]

Isn't using a store.map(item => <Item .... />) a bad approach?

[mweststrate]

No, why would it be? That is the only normal way of doing that in React I know :). It maps from values to component invocations. What you where doing was mapping from value to render logic, which would effectively create one gigantic React component that does everything. See for example https://kentcdodds.com/blog/dont-call-a-react-function-component

[it-efrem]

store.map(item => <Item {...item}/>) It works! Thanks for the quick reply and for the link to the article 💪

[it-efrem]

@mweststrate

I am guided by this, because an arrow function is also created here store.map(item => <Item {...item}/>)

Docs: https://reactjs.org/docs/faq-functions.html

[mweststrate]

That is about passing arrow functions to other components, not the use of arrow functions inside the implementation (which useEffect etc do as well)

On Wed, Feb 5, 2020 at 12:54 PM Eugene Bukowski notifications@github.com wrote:

@mweststrate https://github.com/mweststrate

I am guided by this, because an arrow function is also created here store.map(item => <Item {...item}/>)

Docs: https://reactjs.org/docs/faq-functions.html [image: image] https://user-images.githubusercontent.com/20017668/73843418-abba5680-482f-11ea-8337-56f1432e4720.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx/issues/2272?email_source=notifications&email_token=AAN4NBHADCESJRKLVDQNIXDRBKZJBA5CNFSM4KQKHTVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK3KBFA#issuecomment-582394004, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBBTU7IUE56DUPJ5PL3RBKZJBANCNFSM4KQKHTVA .

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.