{"action":"created","issue":{"url":"https://api.github.com/repos/rackt/react-router/issues/1813","labels_url":"https://api.github.com/repos/rackt/react-router/issues/1813/labels{/name}","comments_url":"https://api.github.com/repos/rackt/react-router/issues/1813/comments","events_url":"https://api.github.com/repos/rackt/react-router/issues/1813/events","html_url":"https://github.com/rackt/react-router/issues/1813","id":104653915,"number":1813,"title":"Endless loop when routes object changes between renders","user":{"login":"omerts","id":4996164,"avatar_url":"https://avatars.githubusercontent.com/u/4996164?v=3","gravatar_id":"","url":"https://api.github.com/users/omerts","html_url":"https://github.com/omerts","followers_url":"https://api.github.com/users/omerts/followers","following_url":"https://api.github.com/users/omerts/following{/other_user}","gists_url":"https://api.github.com/users/omerts/gists{/gist_id}","starred_url":"https://api.github.com/users/omerts/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/omerts/subscriptions","organizations_url":"https://api.github.com/users/omerts/orgs","repos_url":"https://api.github.com/users/omerts/repos","events_url":"https://api.github.com/users/omerts/events{/privacy}","received_events_url":"https://api.github.com/users/omerts/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/rackt/react-router/labels/unverified","name":"unverified","color":"fbca04"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-09-03T09:20:35Z","updated_at":"2015-09-10T13:30:05Z","closed_at":"2015-09-10T03:37:08Z","body":"Hello,\r\n\r\nWe have a component that loads data on a transition:\r\n```javascript\r\nconstructor(props, context) {\r\n    super(props);\r\n\r\n    context.router.addTransitionHook(this._loadActiveData);\r\n  }\r\n\r\n  _loadActiveData(nextState, router, cb) {    \r\n    AppStore.loadActiveData(nextState.location.pathname, cb);\r\n  }\r\n```\r\n\r\nWhen new data loads, we re-render the entire app, in order to transfer the right props through the router's createElement handler:\r\n```javascript\r\nfunction renderApp(sessionId) {    \r\n  React.render(<Router history={history} children={routes(sessionId)} createElement={createElement} />,\r\n                 document.getElementById('app'), () => {\r\n                  console.timeEnd('app render on route change');\r\n                });\r\n}\r\n\r\nAppStore.addChangeListener(renderApp);\r\n```\r\n\r\nOn every renderApp, the routes function returns a new routes object, which most of the time is the same exact object (made sure of it deep comaring the objects). The problem is, that passing a new routes object reference, causes an endless loop, since every time we call React.render the _loadActiveData function is recalled, which in turn calls React.render, and so on.  \r\nMaybe this is by design, but imho if the routes are exactly the same why would the router recall the callback on the transition hook?"},"comment":{"url":"https://api.github.com/repos/rackt/react-router/issues/comments/139234695","html_url":"https://github.com/rackt/react-router/issues/1813#issuecomment-139234695","issue_url":"https://api.github.com/repos/rackt/react-router/issues/1813","id":139234695,"user":{"login":"ryanflorence","id":100200,"avatar_url":"https://avatars.githubusercontent.com/u/100200?v=3","gravatar_id":"","url":"https://api.github.com/users/ryanflorence","html_url":"https://github.com/ryanflorence","followers_url":"https://api.github.com/users/ryanflorence/followers","following_url":"https://api.github.com/users/ryanflorence/following{/other_user}","gists_url":"https://api.github.com/users/ryanflorence/gists{/gist_id}","starred_url":"https://api.github.com/users/ryanflorence/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryanflorence/subscriptions","organizations_url":"https://api.github.com/users/ryanflorence/orgs","repos_url":"https://api.github.com/users/ryanflorence/repos","events_url":"https://api.github.com/users/ryanflorence/events{/privacy}","received_events_url":"https://api.github.com/users/ryanflorence/received_events","type":"User","site_admin":false},"created_at":"2015-09-10T13:30:05Z","updated_at":"2015-09-10T13:30:05Z","body":"I don't understand why you're trying ot render the app when routes are **exited**, it means you're already in a new render cycle.\r\n\r\nSomebody clicked a link, your route is being **exited** and then you're telling the app to rerender, I don't understand why, but the only point of the transition hook is to cancel the transition, literally nothing else should be done in that hook: check the state of the app/component and then allow or don't allow the transition."}}