React Rails + Turbolinks rendering component twice

[efedorenko]

Help us help you! Please choose one:

• My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ x ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• I have another issue to discuss.

---

I use react-rails 2.2.1 with Turbolinks 5.0.3 and my whole setup is run by Webpacker.

I have a React component that shows loading state, then fetches data and renders content. When I open page with this component for the first time it renders properly, but because of Turbolinks' caching when I navigate away from the page and then return it flickers and renders twice — first from the cache (preview), and then a fresh copy. My understanding was that react-rails is supposed to help with this issue, but after setting everything up it did not.

What helped is preventing Turbolinks from rendering a preview from cache. I looked into events detection code in react_ujs and added this to my application.js:

// Do not render components from cache
document.addEventListener('turbolinks:render', () => {
  if (document.documentElement.hasAttribute('data-turbolinks-preview')) {
    ReactRailsUJS.handleUnmount();
  }
});

Even while it solved my problem, I wonder if I miss something and use react-rails incorrectly. Is it even supposed to solve this problem with preview rendering from cache by Turbolinks? If yes, then what can I do to make it work out of the box? And if not, then maybe it should as I can't think of a scenario when React component should be rendered out of cache first.

[BookOfGreg]

I believe this to be fixed in #868 (currently pre-release if you want to test it)
@efedorenko I'll reopen if not, thanks for the report 👍