console.log fixes updating state

[hypo-thesis]

"@risingstack/react-easy-state": "^6.3.0",
node v14.0.0 /
opera Version:68.0.3618.104
"@risingstack/react-easy-state": "^6.3.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"framer-motion": "^1.10.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

Describe the bug
A simple console.log() fixes some issues in my application.
reproducing this and in App.js line 18 by removing console.log('showRes' , store.showRes , store.rndNum) next time the game is played the button doesn't update the state anymore and remains on the page.

---

For tougher bugs

To Reproduce
https://github.com/hypo-thesis/rpc

Expected behavior
I expect the state management to work without console.log

---

[solkimicreb]

Hi! You should wrap all of your components (which are using any store) in view. These include page1, page2, and things in the components folder in your case. That should fix your issue.

Components which are not wrapped with view won't re-render on store mutations.

[hypo-thesis]

Hi! You should wrap all of your components (which are using any store) in view. These include page1, page2, and things in the components folder in your case. That should fix your issue.

Components which are not wrapped with view won't re-render on store mutations.

They are wrapped in view as you can see export default view(App) App.js line 43

[solkimicreb]

I mean all components, not just App.js. Check the page1.js, page2.js files, and all others that use the store inside its component.

[hypo-thesis]

I mean all components, not just App.js. Check the page1.js, page2.js files, and all others that use the store inside its component.

The whole application is wrapped around view through App.js as a global provider. I do not understand what you are trying to convey here as both page1.js and page2.js are indeed wrapped in view tag. In fact if this was not the case the application would not run at all. My concern is why a console.log fixes a state being passed.

[solkimicreb]

I see now.

What I mean by "wrap all components" is to replace export default () => {} by export default view(() => {}) in page1.js, page2.js, and all other files (which use stores inside their components).

This does two things:

• It optimizes your components with memo, so they won't re-render whenever App re-renders.
• It makes them reactive, so they will re-render when a piece of store they use is mutated.

So far you did not do this so all your component re-rendered whenever App re-rendered, and App re-rendered whenever a piece of store it directly used was mutated (this includes the pieces of store inside your console.log).

TLDR: replace export default () => {} by export default view(() => {}) in all of your component files and remove the console.logs from App.js.

I hope this helps. Let me know if it is still not clear.