react-easy-state icon indicating copy to clipboard operation
react-easy-state copied to clipboard

fresh create-react-app doesn't update the state at all when running on the development server

Open TimCabbage opened this issue 1 year ago • 1 comments

React Easy State version: 6.3.0 Platform: browser

Describe the bug When starting a fresh create-react-app in React18 the state is stuck in the initial state and does not update the DOM at all. Only after you change a single file, and hotReload kicks in, will it start working properly. After page refresh (f5) it returns to the broken state and needs another file change and hot reload to start working again.

At the same time setState does change the page contents.

After building the app and serving the final files, this does not happen anymore; it works properly from the get-go.

Disabling Fast-Refresh prevents react-easy-state from working at all.


For tougher bugs

To Reproduce fresh create-react-app install

App.js: `import './App.css'; import { store, view } from '@risingstack/react-easy-state';

const mainStore = store({ bla: 'bla' })

function App() { setInterval(() => { mainStore.bla += 'adsd'; }, 100); return ( <div className="App"> <header className="App-header"> {mainStore.bla} ); }

export default view(App); `

Expected behavior State should update, doesn't. Starts updating again only after changing anything here and HotReload kicks in.

TimCabbage avatar Apr 19 '23 17:04 TimCabbage

UPDATE: After deep diving into node_modules I've found react strictmode interferes with the functioning of this library. Removing the strictmode wrapper removes the issues.

If this could be considered a solution, let me know and I'll close it.

TimCabbage avatar Apr 19 '23 19:04 TimCabbage