shouldLeaveMarkup flag for unmountComponentAtNode#8928
Conversation
|
👍 |
|
I don’t fully understand what you’re trying to do since I don’t know a lot about TurboLinks work.
Generally the rule of thumb is that you can’t mutate DOM nodes managed by React, and you can’t mount React into an existing DOM tree unless it was server-rendered by React. Do TurboLinks work with these constraints? |
|
The process in details (as I understand it): Turbolinks only provide an infrastructure for seamless navigation between pages of a web-application. It intercepts any clicks on All interactions with React is done by ReactOnRails (or ReactRails) front-end library. When turbolinks loads a page (for the first time or by fetching new page, user navigated to), it fires When user clicks a link, Turbolinks fires ReactOnRails currently handles Before ReactOnRails used
I currently do not understand why this warning happens and not sure is it permanent and reproducible. I will investigate it further. But in meantime I'd like to understand what is wrong with unmounting component by another copy of React. What problems can it emerge. |
I think this is the actionable item here. 👍
Different versions of React are likely to have different internal APIs. If one version tries to tear down a tree created by another version, it is likely it will expect different internal properties and methods to exist, and can crash. |
|
I’ll close since we’re unlikely to add this to the public API for now. The real solution indeed seems to be to investigate why that warning fires. For example it might mean client-side React is being replaced in The most straightforward solution to me would be to unmount React components just before the page is being swapped but in the same tick. This way user wouldn’t see a flash of broken content, and you would still be using the old version of React before the new one is loaded. I hope this makes sense! |
|
Ok, Dan. Thank you for clarification! |
4 participants
This can help to resolve the issue when using React with turbolinks and libraries like react-rails or react-on-rails. Turbolinks turns any conventional web application into pseudo-SPA.
Both react-rails and react-on-rails uses turbolinks events to know when to mount and unmount React components on page.
They can use two events for unmounting:
First is
turbolinks:before-render. It happens just before turbolinks swaps the page body. But using this event leads to warnings in console.Second is
turbolinks:before-visit. It happens before turbolinks fetch next page body from server. But unmounting components at this point and removing rendered markup from DOM causes visual changes on page which is bad for UX. By addingsholdLeaveMarkupflag forunmountComponentAtNodewe can free the memory used by component but leave markup in DOM while turbolinks loads new page.I tested these changes on my fork, and they resolve the issue with "flickering" components on turbolinks navigation.