React-rails: Components not cleaned up with turbo links navigation

[mmccall10]

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

[marcelokanzaki]

I can confirm that. @mmccall10 thanks for the quick fix. Let's wait for the PR now...

[jkbailey]

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

[BookOfGreg]

The problem I'm having with PRs at the moment is mostly around the general JS mess. Since Webpack split out Webpack-cli in a teeny patch, not following semantic versioning at all, the pipeline has been broken. Also Chrome stopped supporting the normal selenium API in the last release so I've been spending vast majority of my time just trying to get master built.

I recognize this is an issue for you and the linked PR is valid and correct, sorry this is taking so long. I'm really frustrated too.

[mmccall10]

@BookOfGreg thanks for the response. No pressure! Also, thanks for confirming.