-
Notifications
You must be signed in to change notification settings - Fork 130
Browser's memory keeps increasing when using React-engine & React-router #166
Comments
Having the same issue here. The render() method on the outermost layout keeps getting called. The example has the html tag in the outermost react-router layout route. I've never seen it done like that before; won't that cause the entire DOM to get re-rendered on every route switch and leave all the bindings orphaned? I added more markup to the detail view of the example app and a Router.Link back to the list view. After 10 or so route changes (each of which call render() on the outer layout) the app starts slowing down and the memory footprint of the app in the browser continues to grow. This pattern (rendering the entire DOM from react-router) seems unworkable for anything but really tiny apps with minimal data binding or route nesting. |
We are encountering an issue with FireFox and IE where they become unusable quickly as our Immutable data in Redux grows after a few clicks which appears to be from out of control memory growth triggering rapid garbage collection. This does not happen in Chrome or Safari, so far I have tracked this down to If you change from lodash merge to lodah assign the issue seems to go away does this work for anyone else? Is there a reason _.merge was used over _.assign? Since our data is all Immutable.js the data is much bigger then standard object or array's so I think merge is going too deep when assign I believe is much more shallow. Let me know if the move to _.assign makes sense and I can do a super quick PR. Also note that the route change speed is night and day with the switch to _.assign. |
If anyone wants to merge the PR it is here #169 my only thought about this not working would be if the router props were some how the same name as the component props the router props would win instead of being merge together. Not sure anyone would expect two component with props of the same name to combine into a new "super" prop, but they would lose that with this change. |
@JustinMGaiam you have an example of react-engine redux implentation I could checkout? |
@nguyenhhien @keithchilders can you try 4.0.1 with @JustinMGaiam's fix? |
@SOSANA https://github.com/chunkiat82/kraken-react-engine-router-redux-webpack |
@JustinMGaiam Thank you for replying back, much appreciated. I am using express but waiting for a fix for pr for #170 to fix an issue using provider with redux. That repo had me curious using kraken for future projects. Cheers! |
@JustinMGaiam Look forward to #172 merge 👍 in few days need to wire up react-engine with redux provider which I believe #171 merge now supports as well |
I'm writing Isormophic Web Application by using React-engine & React-router. Before upgrading, my application is running well with the following configuration.
"react": "^0.14.8",
"react-dom": "^0.14.6",
"react-engine": "^3.4.1",
"react-router": "^1.0.3"
Recently, I've upgraded my system to use official React with the following configuration, and I observed my app become slower and slower when running on browser after every click I made on ReactRouter.Link. I've opened Google Chrome Debugger for investigation, then I see usage memory keep increasing after every click.
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-engine": "^4.0.0",
"react-router": "^2.5.2"
Have anyone faced the similar problem? Please help me. Thank you :)
The text was updated successfully, but these errors were encountered: