Components not cleaned up with turbo links navigation

Steps to reproduce

Navigate with turbolinks to pages with render_component.

Expected behavior

Components should be unmounted when navigating to different pages.

Actual behavior

Each page visit renders a new component while leaving the previous ones in place. With turbolinks cached pages subsequent page visits renders 2 new components from what I assume is the cached page, then the new page content.

System configuration

Sprockets or Webpacker version: webpacker (4.0.7) React-Rails version: react-rails (2.6.0) Rect_UJS version: react_ujs@^2.6.0 Rails version: 6.0 Ruby version: 2.6.3

---

It looks like a fix for this might have been submitted with PR #1020. That is almost a month old so maybe its a different issue?

Adding the following code to application.js seems to work as a temporary work around.

document.addEventListener('turbolinks:before-render', () => {
    ReactRailsUJS.handleUnmount()
});

It appears the default way ReactRailsUjs is handling unmounting with turbolinks is the issue.

Sample app that recreates the problem. https://github.com/mmccall10/turbolinks-react-rails-demo

[jkbailey]

Thanks for mentioning my PR, also thanks for the quick fix for now. Not sure how to speed up the PR though.

[jdelStrother]

So now that that PR’s been merged, what’s the expected way of cleaning up react components on leaving the page?

Some of our components use setInterval to do something every x seconds, which call clearInterval in componentWillUnmount. Others might load and/or decode a large file, which gets aborted in componentWillUnmount.

I could possibly clean these up by having each component listen for turbolinks cleanup events, but having those components have to know that they’re living in a turbolinks+react_ujs stack seems like unnecessary coupling.

The PR talks about fixing the scroll-position restoration, but that seems like something that should have been fixed upstream in Turbolinks rather than removing component-unmounts from ReactUJS.